Stop 08 · ReactTopics · 8/20

React Router

In short

A React app is one HTML page, but users still expect /cart, /profile and a working back button. React Router changes what's on screen based on the URL, without a full page reload.

The standard client-side routing library for React, mapping URL paths to components and enabling navigation without full page reloads.

The jaadu mascot rides a mall escalator and points at signs with a fork icon and a shoe icon.

Think of it like this

Floors of a mall

You go from the food court to the shoe shop without ever leaving the building, and the signboards tell you where you are. React Router keeps you inside the same app and swaps the shop on screen, while the URL acts as the signboard.

Watch it happen

A click that never reloads

You

Link

Router

Product

click Phone

1/5You click the Phone link in the nav.

The big ideas

What you need to know

Routes map URLs to components

<Route path="/cart" element={<Cart />} /> means 'show Cart when the URL is /cart'.

Link instead of <a>

Link changes the URL without reloading the page, so your app's state survives the move.

Dynamic segments

path="/product/:id" matches /product/42, and useParams() gives you { id: "42" }.

Nested routes and layouts

A parent route can hold a shared layout, with an <Outlet /> where the child pages appear.

See it in code

Walk through the code

tsx

1import { BrowserRouter, Routes, Route, Link, useParams } from "react-router";2function Product() {3  const { id } = useParams();4  return <h2>Product #{id}</h2>;5}6export default function App() {7  return (8    <BrowserRouter>9      <nav><Link to="/">Home</Link> <Link to="/product/42">Phone</Link></nav>10      <Routes>11        <Route path="/" element={<h2>Home</h2>} />12        <Route path="/product/:id" element={<Product />} />13      </Routes>14    </BrowserRouter>15  );16}

1/3Product reads :id from the URL with useParams.

This is React Router v7, where everything imports from "react-router". In v6 you imported the same pieces from "react-router-dom".

Save yourself the pain

Common mistakes

Oops

Using <a href="/cart"> for links inside your app.

Do this instead

Use <Link to="/cart">. A plain anchor reloads the whole page and wipes your state.

Oops

Deploying and getting a 404 when you refresh on /cart.

Do this instead

The server must send index.html for every path. Add a rewrite rule on your host, like Netlify's _redirects file.

Your mission

A three-page mini site

~25 min

Quick check

You click <Link to="/about">. What happens?

Go deeper

1Set up a few routes with `<Routes>`/`<Route>` and navigate between them.
2Practice dynamic route params (`/users/:id`) and reading them with `useParams`.
3Learn nested routes and layout routes for shared UI across pages.