React Router

React Router

React Router enables client-side routing in React applications. That means your URL can change and React can render a different component without a full page reload.

Note

Mental model: URL -> route match -> component render.

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

URL change usually triggers a full page reload and server request.

With React Router

URL change updates only the relevant React components.

Basic Setup

Install the package:

npm install react-router-dom

Wrap your app:

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
Readability	Easy	Moderate
Scalability	Medium	High
Dynamic config	Hard	Easy
Used in large apps	Less	More

Navigation

Link

Link handles navigation without reloading the page.

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

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

NavLink

NavLink is similar to Link, but it also knows whether the route is active.

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

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

Link vs NavLink

Feature	Link	NavLink
Navigation	Yes	Yes
Active styling	No	Yes
Use case	Basic navigation	Navbar 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 help render pages like user profiles and products.

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

Define dynamic route:

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

Meaning:

:id = dynamic variable

Access dynamic parameter:

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

URL param -> useParams -> API call -> UI update.

Nested Routes

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

Programmatic Navigation

Use useNavigate when navigation should happen from code (for example after form submit).

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

const navigate = useNavigate();

navigate("/about");

Route Matching Internals

React Router uses a path matching algorithm.

/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:

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 plain <a href> for internal routing, you lose SPA behavior and trigger full page refresh.

Advanced Insights

• Routing is state: URL can be treated as application state.
• Component tree changes based on URL.
• Dynamic routing enables profile pages, product pages, and dashboards.

Real Example Structure

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