Week 6: Routing with React Router

1. Why Client-Side Routing

A traditional multi-page site sends a new HTML document from the server on every navigation — the browser tears down the whole page and rebuilds it. A React single-page app (SPA) instead loads one HTML shell, and JavaScript swaps out which components render based on the current URL — no full page reload, no losing in-memory state that shouldn't be lost (like a half-filled form in a persistent header).

React Router is the library that makes this possible: it intercepts link clicks and browser back/forward navigation, updates the URL via the History API without a network round-trip, and renders whichever component your route configuration says matches that URL.

2. Setting Up React Router

npm install react-router

The modern setup defines your routes as data — an array of route objects — and hands them to createBrowserRouter, then renders the result with RouterProvider at your app's root:

import { createRoot } from 'react-dom/client';
import { createBrowserRouter, RouterProvider } from 'react-router';
import HomePage from './pages/HomePage';
import ProductsPage from './pages/ProductsPage';
import AboutPage from './pages/AboutPage';

const router = createBrowserRouter([
  { path: '/', element: <HomePage /> },
  { path: '/products', element: <ProductsPage /> },
  { path: '/about', element: <AboutPage /> },
]);

createRoot(document.getElementById('root')!).render(
  <RouterProvider router={router} />
);

Inside any routed page, use <Link> instead of a plain <a> tag — a regular anchor tag triggers a full page reload; Link intercepts the click and lets React Router handle it client-side:

import { Link } from 'react-router';

function Nav() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/products">Products</Link>
      <Link to="/about">About</Link>
    </nav>
  );
}

3. Nested Routes & Layouts

Most real apps share UI across many pages — a header, a sidebar, a footer — without wanting to repeat that markup in every page component. Nested routes solve this: a parent route renders a shared layout, and an <Outlet /> inside it marks where the matched child route should render.

import { Outlet } from 'react-router';
import Nav from './Nav';

function AppLayout() {
  return (
    <div>
      <Nav />
      <main>
        <Outlet /> {/* the matched child route renders here */}
      </main>
      <footer>© 2026</footer>
    </div>
  );
}

const router = createBrowserRouter([
  {
    path: '/',
    element: <AppLayout />,
    children: [
      { index: true, element: <HomePage /> },        // matches "/" exactly
      { path: 'products', element: <ProductsPage /> }, // matches "/products"
      { path: 'about', element: <AboutPage /> },        // matches "/about"
    ],
  },
]);

Nav and the footer now render exactly once, no matter which child route is active — only the <Outlet /> content swaps as the URL changes. The index: true route is what matches the parent path exactly, playing the role a plain path: '/' would at the top level.

4. Dynamic Segments & useParams

A product page needs a different product per URL — /products/1, /products/2 — without defining a separate route for every possible ID. A dynamic segment, written with a leading colon, matches any value at that position in the path:

{ path: 'products/:productId', element: <ProductDetailPage /> }

import { useParams } from 'react-router';

function ProductDetailPage() {
  const { productId } = useParams(); // string | undefined, matching the :productId segment

  if (!productId) return <p>Not found</p>;

  return <p>Showing product #{productId}</p>;
}

Visiting /products/42 matches this route and gives useParams() back {'{ productId: "42" }'} — note it's always a string, straight from the URL, so convert it (Number(productId)) before using it as a number for something like an API lookup.

5. Programmatic Navigation & Search Params

Not every navigation is a link click — submitting a form and redirecting to a new page, or navigating after an async action completes, both need to trigger navigation from code. useNavigate returns a function for exactly that:

import { useNavigate } from 'react-router';

function LoginForm() {
  const navigate = useNavigate();

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    const success = await login(); // pretend this calls an API
    if (success) {
      navigate('/dashboard'); // programmatic navigation, no <Link> involved
    }
  }

  return <form onSubmit={handleSubmit}>{/* ... */}</form>;
}

Search params (the ?key=value part of a URL) are the standard place for state that should survive a page refresh and be shareable via URL — a search query, a filter, a pagination page number. useSearchParams reads and writes them, keeping them in sync with the URL:

import { useSearchParams } from 'react-router';

function ProductsPage() {
  const [searchParams, setSearchParams] = useSearchParams();
  const category = searchParams.get('category') ?? 'all';

  function handleCategoryChange(next: string) {
    setSearchParams({ category: next }); // updates the URL: /products?category=next
  }

  return (
    <select value={category} onChange={e => handleCategoryChange(e.target.value)}>
      <option value="all">All</option>
      <option value="electronics">Electronics</option>
    </select>
  );
}

Because this lives in the URL rather than local component state, refreshing the page or sharing the link preserves the selected filter — something a plain useState could never do on its own.

6. Hands-on Exercise

const products = [
  { id: 1, name: 'Mechanical Keyboard', category: 'electronics' },
  { id: 2, name: 'Standing Desk', category: 'furniture' },
  { id: 3, name: 'Wireless Mouse', category: 'electronics' },
  { id: 4, name: 'Desk Lamp', category: 'furniture' },
];

7. Knowledge Check

Four quick questions. Expand each to check your answer.