React Router Setup

React Router setup means preparing a React application to use routes, navigation, and URL-based components.

The basic setup usually includes:

• Installing React Router
• Importing router components
• Creating a router
• Creating routes
• Connecting routes with components

Before installing React Router, make sure you already have a React project.

npm create vite@latest my-react-app

Then move into the project folder:

cd my-react-app

Install the project dependencies:

npm install

Open the terminal inside your React project and install react-router-dom.

npm install react-router-dom

This adds the React Router package to your project.

After installation, the package is added to the project's dependencies.

{
  "dependencies": {
    "react-router-dom": "..."
  }
}

The exact version depends on the version installed in your project.

The first important router component is BrowserRouter.

import {
    BrowserRouter
} from "react-router-dom";

It provides routing functionality for a browser-based React application.

The Routes component is used to contain the route definitions.

import {
    BrowserRouter,
    Routes
} from "react-router-dom";

Individual Route components are placed inside Routes.

The Route component connects a URL path with a React element.

import {
    BrowserRouter,
    Routes,
    Route
} from "react-router-dom";

First, create a simple component that will represent the home page.

function Home() {

    return (
        <h1>Home Page</h1>
    );
}

export default Home;

Create another component for the About page.

function About() {

    return (
        <h1>About Page</h1>
    );
}

export default About;

Now the application has two page components.

Routes are created using the Route component.

<Routes>

    <Route
        path="/"
        element={<Home />}
    />

    <Route
        path="/about"
        element={<About />}
    />

</Routes>

The path prop specifies the URL path for a route.

<Route
    path="/about"
    element={<About />}
/>

The path in this example is /about.

The element prop specifies what React element should be displayed when the route matches.

<Route
    path="/about"
    element={<About />}
/>

Here, the About component is rendered for the /about path.

The routes should be used within a router context.

<BrowserRouter>

    <Routes>

        <Route
            path="/"
            element={<Home />}
        />

        <Route
            path="/about"
            element={<About />}
        />

    </Routes>

</BrowserRouter>

A basic App.jsx can contain the routing configuration.

import {
    BrowserRouter,
    Routes,
    Route
} from "react-router-dom";

import Home from "./Home";
import About from "./About";

function App() {

    return (
        <BrowserRouter>

            <Routes>

                <Route
                    path="/"
                    element={<Home />}
                />

                <Route
                    path="/about"
                    element={<About />}
                />

            </Routes>

        </BrowserRouter>
    );
}

export default App;

You can add more routes to your application.

function Contact() {

    return (
        <h1>Contact Page</h1>
    );
}

Then add its route:

<Route
    path="/contact"
    element={<Contact />}
/>

If your page components are stored in a pages folder, they can be imported like this:

import Home from "./pages/Home";
import About from "./pages/About";
import Contact from "./pages/Contact";

This helps keep larger React projects organized.

A common project structure is:

src/
├── pages/
│   ├── Home.jsx
│   ├── About.jsx
│   └── Contact.jsx
│
├── App.jsx
└── main.jsx

The pages folder can contain components that represent application pages.

After creating routes, you can add navigation using the Link component.

import { Link } from "react-router-dom";

function Navbar() {

    return (
        <nav>

            <Link to="/">
                Home
            </Link>

            <Link to="/about">
                About
            </Link>

        </nav>
    );
}

import { Link } from "react-router-dom";

function Navbar() {

    return (
        <nav>

            <Link to="/">
                Home
            </Link>

            {" | "}

            <Link to="/about">
                About
            </Link>

            {" | "}

            <Link to="/contact">
                Contact
            </Link>

        </nav>
    );
}

export default Navbar;

The navigation component can be placed above the routes.

<BrowserRouter>

    <Navbar />

    <Routes>

        <Route
            path="/"
            element={<Home />}
        />

        <Route
            path="/about"
            element={<About />}
        />

    </Routes>

</BrowserRouter>

Another common setup is to place BrowserRouter around App in main.jsx.

import React from "react";
import ReactDOM from "react-dom/client";

import {
    BrowserRouter
} from "react-router-dom";

import App from "./App";

ReactDOM.createRoot(
    document.getElementById("root")
).render(
    <BrowserRouter>
        <App />
    </BrowserRouter>
);

If BrowserRouter is already placed around App in main.jsx, you normally should not wrap App with another BrowserRouter.

// main.jsx

<BrowserRouter>
    <App />
</BrowserRouter>

Then App.jsx can contain the route definitions directly.

import {
    Routes,
    Route
} from "react-router-dom";

import Home from "./pages/Home";
import About from "./pages/About";

function App() {

    return (
        <Routes>

            <Route
                path="/"
                element={<Home />}
            />

            <Route
                path="/about"
                element={<About />}
            />

        </Routes>
    );
}

export default App;

This structure works when BrowserRouter is provided above App.

Start your React development server:

npm run dev

Then open the development URL and test the routes.

/
 /about
 /contact

Each URL should display the component associated with its route.

If React Router is not installed, you may see an error when importing it.

Failed to resolve import "react-router-dom"

Install the package using:

npm install react-router-dom

Make sure router components are imported from the correct package.

import {
    BrowserRouter,
    Routes,
    Route,
    Link
} from "react-router-dom";

A spelling mistake in the package name or component name can cause an error.

Components such as Link need router context.

For example, this type of structure is correct:

<BrowserRouter>

    <Navbar />

    <Routes>
        <Route
            path="/"
            element={<Home />}
        />
    </Routes>

</BrowserRouter>

src/
│
├── components/
│   └── Navbar.jsx
│
├── pages/
│   ├── Home.jsx
│   ├── About.jsx
│   └── Contact.jsx
│
├── App.jsx
└── main.jsx

This structure is simple and can be expanded as the application grows.

// main.jsx

import React from "react";
import ReactDOM from "react-dom/client";

import {
    BrowserRouter
} from "react-router-dom";

import App from "./App";

ReactDOM.createRoot(
    document.getElementById("root")
).render(
    <BrowserRouter>
        <App />
    </BrowserRouter>
);


// App.jsx

import {
    Routes,
    Route,
    Link
} from "react-router-dom";

function Home() {
    return <h1>Home Page</h1>;
}

function About() {
    return <h1>About Page</h1>;
}

function App() {

    return (
        <>

            <nav>

                <Link to="/">
                    Home
                </Link>

                {" | "}

                <Link to="/about">
                    About
                </Link>

            </nav>

            <Routes>

                <Route
                    path="/"
                    element={<Home />}
                />

                <Route
                    path="/about"
                    element={<About />}
                />

            </Routes>

        </>
    );
}

export default App;

• Install react-router-dom before using React Router.
• Keep page components organized.
• Use meaningful URL paths.
• Use Link for internal navigation.
• Keep BrowserRouter in one appropriate place.
• Do not unnecessarily nest multiple BrowserRouter components.
• Keep route definitions easy to understand.
• Test every important route.
• Use reusable navigation components.
• Handle invalid routes appropriately as the application grows.

Install
   ↓
BrowserRouter
   ↓
Routes
   ↓
Route
   ↓
Component
   ↓
Link Navigation