Chapter 8: React Router & State Management

Learn how to add multiple pages to your React app and manage complex application state.

Note: React Router requires a build environment, so these are read-only demonstrations. Focus on understanding the patterns — you'll implement them in your projects!

SPA Concept

Routes

Navigation

Dynamic Routes

Protected Routes

State Patterns

Quiz

SPA Concept

Think of a traditional website like switching between different TV sets — each page change loads an entirely new screen from scratch. A Single Page Application (SPA) is like switching channels on ONE TV — the TV stays on, and only the content changes instantly. No reloading, no blank screens.

In a traditional website, every link click asks the server for a whole new HTML page. In a SPA:

The entire app loads once
Clicking links swaps out components instantly (no page reload)
The URL changes, but the browser stays on the same page
Only the data you need is fetched from the server

Traditional vs SPA

Feature	Traditional Website	SPA (React)
Page change	Full reload from server	Instant swap of components
Speed	Slower (each click = new page)	Faster (load once, swap content)
User experience	Flash of white between pages	Smooth, app-like feel
URL	Changes (new page)	Changes (but no reload)
Analogy	Switching TV sets	Switching channels

React Router is the library that makes SPA routing work in React.
Install it with: npm install react-router-dom

Routes

Routes are like a TV channel guide. Channel 1 shows News, Channel 2 shows Sports, Channel 3 shows Movies. In React Router, URL "/" shows the Home component, "/about" shows the About component, "/contact" shows the Contact component.

React Router — Basic Routes (Read-Only)

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

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

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

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

function NotFound() {
    return <h1>404 - Page Not Found</h1>;
}

// App with routing
function App() {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/about" element={<About />} />
                <Route path="/contact" element={<Contact />} />
                <Route path="*" element={<NotFound />} />
            </Routes>
        </BrowserRouter>
    );
}

// URL "/"        → shows Home component
// URL "/about"   → shows About component
// URL "/xyz"     → shows NotFound (the * catches everything else)

Route Structure Breakdown

Component	Purpose
`<BrowserRouter>`	Wraps your entire app — enables routing
`<Routes>`	Container for all Route definitions
`<Route>`	Maps a URL path to a component
`path="*"`	Catches all unmatched URLs (404 page)

Navigation

In a SPA, regular <a> links would cause a full page reload — like unplugging your TV and plugging in a different one. React Router's <Link> component is like pressing buttons on your remote control — it switches the channel without turning off the TV.

React Router — Navigation (Read-Only)

import { Link, NavLink, useNavigate } from 'react-router-dom';

function Navbar() {
    const navigate = useNavigate(); // Programmatic navigation

    function handleLogout() {
        // Clear auth, then redirect to home
        localStorage.removeItem('token');
        navigate('/');  // Go to home page (no link click needed!)
    }

    return (
        <nav>
            {/* Link — basic navigation (no page reload) */}
            <Link to="/">Home</Link>
            <Link to="/about">About</Link>

            {/* NavLink — like Link, but adds "active" class automatically */}
            <NavLink to="/products"
                className={({ isActive }) =>
                    isActive ? "nav-link active" : "nav-link"
                }>
                Products
            </NavLink>

            {/* Button with programmatic navigation */}
            <button onClick={handleLogout}>Logout</button>
        </nav>
    );
}

// DON'T use <a href="/about"> in React SPAs!
// It causes a full page reload, losing all state.
// ALWAYS use <Link to="/about"> instead.

// Navigation methods:
// <Link to="/path">         — click to navigate
// <NavLink to="/path">      — click + active styling
// navigate('/path')          — navigate from code (after form submit, etc.)
// navigate(-1)               — go back (like browser back button)

Never use <a href="..."> for internal links in React! It causes a full page reload, which defeats the purpose of a SPA. Always use <Link> or <NavLink> from react-router-dom.

Dynamic Routes

Dynamic routes are like numbered hotel rooms. The URL /room/:id is a template — /room/101, /room/202, and /room/305 all use the same template but show different content based on the room number. The :id part is the variable.

React Router — Dynamic Routes (Read-Only)

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

// Route definition with a URL parameter
function App() {
    return (
        <Routes>
            <Route path="/products" element={<ProductList />} />
            <Route path="/products/:productId" element={<ProductDetail />} />
        </Routes>
    );
}

// Product list with links to individual products
function ProductList() {
    const products = [
        { id: 1, name: "Laptop" },
        { id: 2, name: "Phone" },
        { id: 3, name: "Tablet" },
    ];

    return (
        <div>
            <h1>Products</h1>
            {products.map(p => (
                <Link key={p.id} to={`/products/${p.id}`}>
                    <p>{p.name}</p>
                </Link>
            ))}
        </div>
    );
}

// Product detail — reads the :productId from the URL
function ProductDetail() {
    const { productId } = useParams(); // Gets "1", "2", "3" from URL

    return <h1>Product #{productId}</h1>;
    // URL "/products/2" → shows "Product #2"
}

Nested Routes

React Router — Nested Routes (Read-Only)

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

// Layout component — shared across pages
function DashboardLayout() {
    return (
        <div>
            <h1>Dashboard</h1>
            <nav>
                <Link to="/dashboard">Overview</Link>
                <Link to="/dashboard/settings">Settings</Link>
                <Link to="/dashboard/profile">Profile</Link>
            </nav>
            <Outlet />  {/* Child routes render HERE */}
        </div>
    );
}

function App() {
    return (
        <Routes>
            <Route path="/dashboard" element={<DashboardLayout />}>
                <Route index element={<Overview />} />
                <Route path="settings" element={<Settings />} />
                <Route path="profile" element={<Profile />} />
            </Route>
        </Routes>
    );
}

<Outlet /> is like a TV screen inside a cabinet. The cabinet (layout) stays the same, but the screen (Outlet) shows different content depending on which nested route is active.

Protected Routes

Protected routes are like a bouncer at a club. Before letting you into the VIP section (dashboard, profile, settings), the bouncer checks your ID (authentication). If you're not on the list, you get redirected to the entrance (login page).

React Router — Protected Routes (Read-Only)

import { Navigate, Outlet } from 'react-router-dom';

// ProtectedRoute component — the "bouncer"
function ProtectedRoute() {
    const isAuthenticated = localStorage.getItem('token'); // Check if logged in

    // If not authenticated, redirect to login
    if (!isAuthenticated) {
        return <Navigate to="/login" replace />;
    }

    // If authenticated, show the protected content
    return <Outlet />;
}

// App routing with protection
function App() {
    return (
        <Routes>
            {/* Public routes — anyone can access */}
            <Route path="/" element={<Home />} />
            <Route path="/login" element={<Login />} />
            <Route path="/register" element={<Register />} />

            {/* Protected routes — must be logged in */}
            <Route element={<ProtectedRoute />}>
                <Route path="/dashboard" element={<Dashboard />} />
                <Route path="/profile" element={<Profile />} />
                <Route path="/settings" element={<Settings />} />
            </Route>

            <Route path="*" element={<NotFound />} />
        </Routes>
    );
}

The replace prop on <Navigate> replaces the current history entry instead of adding a new one. This means pressing "Back" won't take the user back to the protected page they couldn't access.

State Patterns

Managing state in a growing app is like organizing a growing company. A small team can communicate by shouting across the room (props). A medium team needs a bulletin board (Context). A large company needs a formal communication system with departments and protocols (Redux, Zustand, etc.).

As your app grows, you need to choose the right state management approach:

State Management Options

Approach	Best For	Complexity
`useState`	Local component state (form inputs, toggles)	Simple
`useReducer`	Complex state logic in one component	Medium
`Context + useReducer`	Shared state across a few related components	Medium
Zustand	Global state, simple API, lightweight	Low-Medium
Redux Toolkit	Large apps, complex state, team projects	Higher

useReducer — For Complex State

React — useReducer Pattern (Read-Only)

import { useReducer } from 'react';

// Reducer function — describes HOW state changes
function cartReducer(state, action) {
    switch (action.type) {
        case 'ADD_ITEM':
            return { ...state, items: [...state.items, action.payload] };
        case 'REMOVE_ITEM':
            return {
                ...state,
                items: state.items.filter(item => item.id !== action.payload)
            };
        case 'CLEAR_CART':
            return { ...state, items: [] };
        default:
            return state;
    }
}

function ShoppingCart() {
    const [cart, dispatch] = useReducer(cartReducer, { items: [] });

    return (
        <div>
            <h1>Cart ({cart.items.length} items)</h1>

            <button onClick={() => dispatch({
                type: 'ADD_ITEM',
                payload: { id: Date.now(), name: 'New Item' }
            })}>
                Add Item
            </button>

            <button onClick={() => dispatch({ type: 'CLEAR_CART' })}>
                Clear Cart
            </button>

            {cart.items.map(item => (
                <div key={item.id}>
                    {item.name}
                    <button onClick={() => dispatch({
                        type: 'REMOVE_ITEM', payload: item.id
                    })}>Remove</button>
                </div>
            ))}
        </div>
    );
}

When to Use What

Start simple, upgrade only when needed:

useState — always start here. Handles 80% of cases.
useReducer — when one component has complex state with many actions.
Context — when sibling/distant components need the same state (theme, auth).
Zustand/Redux — when Context becomes unwieldy in a large app.

Don't over-engineer! Many beginners jump to Redux immediately. For most projects, useState + Context is more than enough. Add complexity only when you feel the pain of managing state.

📝 Chapter 8 Quiz

1. What happens when you navigate in a Single Page Application?

The browser loads a new HTML page from the server

React swaps components without a full page reload

The URL stays the same

JavaScript is disabled and re-enabled

2. Why should you use <Link> instead of <a> in React?

Link is faster to type

Link supports CSS styling

Link navigates without a full page reload

Link works in all browsers

3. How do you access URL parameters (like :id) in React Router?

useParams() hook

this.params

window.location.params

getParams() function

4. What does a protected route do?

Encrypts the page content

Hides the URL from the user

Prevents the page from being bookmarked

Redirects unauthenticated users to a login page

5. What's the recommended approach for state management in a new React app?

Always start with Redux

Start with useState, upgrade when needed

Use global variables

Store everything in localStorage

← Chapter 7: React Hooks Chapter 9: API Development →