React Router

React Router lets you change pages inside a React app without reloading the whole page. This means the URL in the browser can change, and React will just show a different component on the screen, without refreshing the page.

Note

Simple way to think about it: URL changes -> Router finds the matching route -> Component shows up on screen.

graph LR A["URL changes"] --> B["Router matches path"] B --> C["Component tree updates"] C --> D["No full page reload"]

Without Router vs With Router

Without Router

When the URL changes, the browser usually reloads the whole page and asks the server for everything again.

With React Router

When the URL changes, only the needed part of the React app updates. No full reload.

Basic Setup

First, install the package:

npm install react-router-dom

Now wrap your app with the Router:

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

function App() {
    return (
        <BrowserRouter>
            <Main />
        </BrowserRouter>
    );
}

Creating Routes (Two Ways)

JSX-Based Routes

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

function Main() {
    return (
        <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/about" element={<About />} />
            {/* Nested Route / Child Routes */}
            <Route path="/user" element={<UserLayout />}>
                <Route path="profile" element={<Profile />} />
                <Route path="settings" element={<Settings />} />
            </Route>
        </Routes>
    );
}

Object-Based Routes

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

function Main() {
    const routes = useRoutes([
        { path: "/", element: <Home /> },
        { path: "/about", element: <About /> },
        // Nested Route / Child Routes
        {
            path: "/user",
            element: <UserLayout />,
            children: [
                { path: "profile", element: <Profile /> },
                { path: "settings", element: <Settings /> },
            ],
        },
    ]);

    return routes;
}

JSX Routes vs Object Routes

Feature	JSX Routes	Object Routes
Easy to read	Easy	A bit harder
Works well for big apps	Okay	Better
Setting routes with data	Hard	Easy
Used in large apps	Less	More

Navigation

Link

Link is used to move between pages without reloading the page.

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

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

NavLink

NavLink works just like Link, but it also tells you if that link is the one currently active (the page you are on right now).

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

<NavLink to="/about">About</NavLink>;

Link vs NavLink

Feature	Link	NavLink
Moves between pages	Yes	Yes
Shows which page is active	No	Yes
Best used for	Simple links	Navbars and menus

NavLink Active Class

<NavLink to="/about" className={({ isActive }) => (isActive ? "active" : "")]}>
    About
</NavLink>

.active {
    color: red;
    font-weight: bold;
}

graph LR A["Current URL"] --> B{"Matches NavLink path?"} B -- "Yes" --> C["isActive = true"] B -- "No" --> D["isActive = false"]

Dynamic Routing

Dynamic routes are useful when you want to show pages like user profiles or product pages, where the page content changes based on an ID or name in the URL.

/users/1
/users/2
/users/3

This is how you set up a dynamic route:

<Route path="/user/:id" element={<User />} />

Here, :id simply means:

:id = a value that can change

You can grab that value like this:

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

function User() {
    const { id } = useParams();

    return <h1>User ID: {id}</h1>;
}

graph TD A["URL: /user/10"] --> B["useParams()"] B --> C["{ id: '10' }"]

Dynamic Routing + API Fetch

Route:

<Route path="/user/:id" element={<User />} />

Component:

import { useParams } from "react-router-dom";
import { useEffect, useState } from "react";

function User() {
    const { id } = useParams();
    const [user, setUser] = useState(null);

    useEffect(() => {
        fetch(`https://api.example.com/users/${id}`)
            .then((res) => res.json())
            .then((data) => setUser(data));
    }, [id]);

    if (!user) return <p>Loading...</p>;

    return (
        <div>
            <h1>{user.name}</h1>
            <p>{user.email}</p>
        </div>
    );
}

Key Concept

This is the simple flow: you get the ID from the URL using useParams, then use that ID to call an API, and finally update what shows on the screen.

Nested Routes

<Route path="/user" element={<UserLayout />}>
    <Route path="profile" element={<Profile />} />
    <Route path="settings" element={<Settings />} />
</Route>

Programmatic Navigation

Use useNavigate when you want to send the user to a different page from your code, instead of them clicking a link (for example, after they submit a form).

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

const navigate = useNavigate();

navigate("/about");

Route Matching Internals

React Router has a built-in way of checking which route matches the current URL.

/user/:id matches:
/user/1
/user/abc

Full Flow

graph TD A["User clicks Link"] --> B["URL changes"] B --> C["Router matches route"] C --> D["Component renders"] D --> E["useParams extracts values"] E --> F["API fetch if needed"] F --> G["UI updates"]

Common Mistakes

Missing dependency

useEffect(() => {
    fetchData();
}, []); // Wrong when id is used inside

Correct way:

useEffect(() => {
    fetchData(id);
}, [id]);

Using a tag instead of Link

<a href="/about">This reloads page</a>

Wrong dynamic route

<Route path="/user/id" /> // Wrong

Danger

If you use a plain <a href> tag for moving inside your app, you lose the smooth single-page app feel, and the page will fully reload.

Advanced Insights

• You can think of the URL itself as a kind of state in your app.
• The components shown on screen change depending on what the URL is.
• Dynamic routing makes it possible to build things like profile pages, product pages, and dashboards.

Real Example Structure

graph TD APP["/app"] --> HOME["Home"] APP --> USERS["Users"] USERS --> DETAIL["UserDetail (/user/:id)"]