Routing in React

Three pages and an address that never changes

A shop has pages: a home page, a list of teas, a cart. In React you could keep the current page in state and show the matching component. Here is that shop. Click its three buttons.

1import { useState } from "react";2 3export default function App() {4  const [page, setPage] = useState("home");5 6  return (7    <>8      <nav>9        <button onClick={() => setPage("home")}>Home</button>10        <button onClick={() => setPage("teas")}>Teas</button>11        <button onClick={() => setPage("cart")}>Cart</button>12      </nav>13      {page === "home" && <h2>Welcome to the tea shop</h2>}14      {page === "teas" && <h2>All teas</h2>}15      {page === "cart" && <h2>Your cart</h2>}16    </>17  );18}

Line 4 keeps the page's name in state, starting with "home". Lines 9 to 11 set it, and lines 13 to 15 show the heading for the page that's picked. It works while you click. Now go to the cart and press Run again, which starts the result over, the way a refresh starts a page over: you're back on the home page.

On a real site, keeping the page in state breaks things people expect from a web page:

• The address never changes. It says shop.example/ on every page, so you can't bookmark the cart or send a friend the link to one tea.
• Refresh loses your place. State starts over, so a refresh always shows the home page.
• Back leaves the shop. The browser's history has one entry for the whole shop, so Back goes to the site you came from.

A router fixes this by making the address the thing that decides the page. The URL is the full address, like https://shop.example/teas/mint; the part after the site's name, /teas/mint, is its path. A route is a rule that pairs a path pattern with the component to show for it. On every click, a router changes the address, finds the route that fits it, and shows that route's component. React doesn't include a router; it comes from a library such as React Router, or from a framework built on one.

The address is state that lives outside React

The address belongs to the browser, not to a component. Any part of the page can change it, and Back and Forward change it without asking React. That makes it outside data, the kind the Subscribing to external stores lesson reads with useSyncExternalStore. So the first piece of a router is a small store that holds the address.

The live results on this page have no address bar of their own, so the examples keep a pretend browser history in a store and draw an address bar on the page. Here is the shop again, on a tiny router written for this lesson. It has four tabs: App.jsx, router.jsx, AddressBar.jsx, and styles.css.

1import AddressBar from "./AddressBar.jsx";2import { Link, usePath } from "./router.jsx";3 4export default function App() {5  const path = usePath();6 7  return (8    <>9      <AddressBar />10      <nav>11        <Link to="/">Home</Link>12        <Link to="/teas">Teas</Link>13        <Link to="/cart">Cart</Link>14      </nav>15      {path === "/" && <h2>Welcome to the tea shop</h2>}16      {path === "/teas" && <h2>All teas</h2>}17      {path === "/cart" && <h2>Your cart</h2>}18    </>19  );20}

Click Teas, then Cart. The address changes to shop.example/teas, then shop.example/cart, and the list under it, the history, grows to three entries. Press Back: the address says /teas again, and the page follows. In App.jsx, line 5 reads the path with usePath(), and lines 15 to 17 show a heading for each path, as the state version did with its page name. Lines 11 to 13 are links instead of buttons. Now open the router.jsx tab:

• Line 4 is the history: a list of entries, the addresses you visited, and the index of the one you're on. Line 5 keeps the components that are listening.
• update on lines 7 to 10 replaces the history with a new object and tells every listener. A new object, never a change to the old one, so React can tell it changed.
• navigate on lines 12 to 15 goes to a new address. Line 13 keeps the entries up to the current one and adds the new path; line 14 points the index at it.
• go on lines 17 to 20 moves the index: go(-1) is Back and go(1) is Forward. Line 19 does nothing past either end.
• useHistory on lines 27 to 29 reads the store with useSyncExternalStore: subscribe (lines 22 to 25) adds a listener, and the snapshot is the history object. usePath on lines 31 to 34 returns the current entry.
• Link on lines 36 to 42 draws a real <a href>. Its click handler stops the browser from loading the address from the server (event.preventDefault() on line 38) and calls navigate instead.

AddressBar.jsx draws the address and the history list from useHistory(), and its buttons call go(-1) and go(1). Now, still on /teas, click Home. The history reads /, /teas, /: the /cart that was ahead of you is gone, and Forward is greyed out. Line 13 dropped it before adding the new address, as browsers do.

On a real page, the browser keeps the history, and only the store's three functions change. The History & navigation lesson covers pushState and popstate:

export function navigate(path) {
  window.history.pushState(null, "", path);
  listeners.forEach((listener) => listener());
}

// Back and Forward change the address, then fire popstate.
window.addEventListener("popstate", () => {
  listeners.forEach((listener) => listener());
});

export function usePath() {
  return useSyncExternalStore(subscribe, () => window.location.pathname);
}

Line 2 changes the address in the browser's address bar and adds a history entry, without loading a page. Lines 7 to 9 listen for popstate, which the browser fires after Back or Forward. Line 12 reads the path from window.location.pathname. It doesn't run in the results on this page: they have no address bar to change. Real routers also let a click with Ctrl, Cmd, or the middle button through, so "open in a new tab" still works.

Matching an address to a route

Checking path === "/teas" for each page doesn't scale: a shop with 200 teas would need 200 checks. A route pattern can have a param, a part that starts with : and fits any value. /teas/:teaId fits /teas/green and /teas/mint, and gives you teaId. Step 2 of the tiny router adds two functions to the bottom of router.jsx, lines 44 to 65:

1import AddressBar from "./AddressBar.jsx";2import { Link, Routes } from "./router.jsx";3 4const teas = { green: "Green tea", mint: "Mint tea" };5 6function Home() {7  return <h2>Welcome to the tea shop</h2>;8}9 10function TeaList() {11  return (12    <ul>13      <li><Link to="/teas/green">Green tea</Link></li>14      <li><Link to="/teas/mint">Mint tea</Link></li>15      <li><Link to="/teas/oolong">Oolong</Link></li>16    </ul>17  );18}19 20function TeaPage({ params }) {21  return <h2>{teas[params.teaId] ?? `We don't sell "${params.teaId}"`}</h2>;22}23 24function NotFound() {25  return <h2>Page not found</h2>;26}27 28const routes = [29  { path: "/", Component: Home },30  { path: "/teas", Component: TeaList },31  { path: "/teas/:teaId", Component: TeaPage },32  { path: "*", Component: NotFound },33];34 35export default function App() {36  return (37    <>38      <AddressBar />39      <nav>40        <Link to="/">Home</Link>41        <Link to="/teas">Teas</Link>42        <Link to="/gifts">Gifts</Link>43      </nav>44      <Routes routes={routes} />45    </>46  );47}

In App.jsx, lines 28 to 33 list the routes, each a path pattern and a component. * on line 32 fits any address, for a "not found" page. Line 44 hands the list to Routes. TeaPage on lines 20 to 22 gets the params as a prop and looks the tea up with params.teaId.

In router.jsx, matchPath (lines 45 to 55) splits the pattern and the path at each / and drops the empty parts. If they have a different number of parts, line 48 returns null: no fit. Then it compares part by part: a part that starts with : saves the address's part under that name (line 51), and any other part must be the same (line 52). Routes (lines 58 to 65) tries the routes in order and draws the first one that fits, with its params.

Click Teas, then Mint tea: /teas/mint shows Mint tea. Click Teas and Oolong: the route fits, but the shop has no oolong, so TeaPage says We don't sell "oolong". Gifts fits no route but *, so it says Page not found. Try any address in the playground, with the same matchPath:

1// The params when the path fits the pattern, or null when it doesn't.2export function matchPath(pattern, path) {3  const want = pattern.split("/").filter(Boolean);4  const got = path.split("/").filter(Boolean);5  if (want.length !== got.length) return null;6  const params = {};7  for (let i = 0; i < want.length; i += 1) {8    if (want[i].startsWith(":")) params[want[i].slice(1)] = got[i];9    else if (want[i] !== got[i]) return null;10  }11  return params;12}

Try /teas/mint/reviews: /teas/:teaId has two parts and the address three, so only * fits. A param fits exactly one part, never a slash.

Links, and navigating from your code

The tiny Link draws an <a href>, not a <button>, on purpose. A link is something people and browsers already understand: hovering it shows the address, it can open in a new tab, it can be copied, and screen readers announce it as a link. The router only takes over a plain click, to change the page without a page load.

Sometimes your code decides where to go, not a link. After an order is placed, the shop should show a thank-you page. Call navigate in the event handler:

1import AddressBar from "./AddressBar.jsx";2import { Link, Routes, navigate } from "./router.jsx";3 4function Home() {5  return <h2>Welcome to the tea shop</h2>;6}7 8function Cart() {9  function placeOrder() {10    // Send the order to the server here, then:11    navigate("/thanks");12  }13  return (14    <>15      <h2>Your cart: 2 teas</h2>16      <button onClick={placeOrder}>Place order</button>17    </>18  );19}20 21function Thanks() {22  return <h2>Thanks for your order!</h2>;23}24 25const routes = [26  { path: "/", Component: Home },27  { path: "/cart", Component: Cart },28  { path: "/thanks", Component: Thanks },29];30 31export default function App() {32  return (33    <>34      <AddressBar />35      <nav>36        <Link to="/">Home</Link>37        <Link to="/cart">Cart</Link>38      </nav>39      <Routes routes={routes} />40    </>41  );42}

Line 2 imports navigate with the rest. placeOrder on lines 9 to 12 is the click handler for the button on line 16; a real shop would send the order to its server first, then line 11 goes to /thanks. Click Cart, then Place order: the address says /thanks, and the history is /, /cart, /thanks.

Now press Back. You're on the cart again, with its Place order button, for an order that's already placed. For moments like this, routers can replace the current entry instead of adding one, so Back skips it. React Router writes it navigate("/thanks", { replace: true }); exercise 5 adds it to the tiny router. Use a link for anything the person picks, and navigate for a page your code moves them to after something happens.

The same shop with React Router

The tiny router has the parts every router has. A real one adds what a shop needs on top: layouts, data loading, errors, pending pages, and years of fixes. React Router is the most widely used router for React. This lesson uses version 8.5.0, the latest when it was checked in October 2026; React Router 7 code looks the same for everything shown here. In a project, you install it:

npm install react-router

Here is the shop from the matching section on React Router. Its result works the same way: try Teas, Mint tea, Oolong, and Gifts.

1import { createMemoryRouter, Link, Outlet, RouterProvider, useParams } from "react-router@8.5.0?dev&deps=react@19.3.1,react-dom@19.3.1";2import AddressBar from "./AddressBar.jsx";3 4const teas = { green: "Green tea", mint: "Mint tea" };5 6function Home() {7  return <h2>Welcome to the tea shop</h2>;8}9 10function TeaList() {11  return (12    <ul>13      <li><Link to="/teas/green">Green tea</Link></li>14      <li><Link to="/teas/mint">Mint tea</Link></li>15      <li><Link to="/teas/oolong">Oolong</Link></li>16    </ul>17  );18}19 20function TeaPage() {21  const { teaId } = useParams();22  return <h2>{teas[teaId] ?? `We don't sell "${teaId}"`}</h2>;23}24 25function NotFound() {26  return <h2>Page not found</h2>;27}28 29function Layout() {30  return (31    <>32      <AddressBar />33      <nav>34        <Link to="/">Home</Link>35        <Link to="/teas">Teas</Link>36        <Link to="/gifts">Gifts</Link>37      </nav>38      <Outlet />39    </>40  );41}42 43const router = createMemoryRouter([44  {45    path: "/",46    Component: Layout,47    children: [48      { index: true, Component: Home },49      { path: "teas", Component: TeaList },50      { path: "teas/:teaId", Component: TeaPage },51      { path: "*", Component: NotFound },52    ],53  },54]);55 56export default function App() {57  return <RouterProvider router={router} />;58}

Lines 43 to 54 make the router with createMemoryRouter, from a list of route objects, and line 57 shows it with RouterProvider. A memory router keeps its history in memory, like the tiny router does, which is what these results need. Route objects can hold other routes: the route on lines 44 to 53 draws Layout for every page, and its children are the pages. { index: true } on line 48 is the page for the parent's own path, /, and the child paths on lines 49 to 51 are written without the parent's /.

Layout on lines 29 to 41 draws the address bar and the menu, then <Outlet /> on line 38, the place where the matching child route's page goes. TeaPage reads its param with useParams() on line 21, so no prop is needed: the router keeps the match in a context, and any component inside the route can read it. The AddressBar.jsx tab reads the address with useLocation() and goes back with navigate(-1) from useNavigate().

Line 1 is the one odd line: the live result loads React Router 8.5.0 from a CDN (a server for packages), with ?dev&deps=react@19.3.1,react-dom@19.3.1 so it uses the same React as the page. In a project you write from "react-router", and a real site keeps its history in the browser with createBrowserRouter:

import { createRoot } from "react-dom/client";
import { createBrowserRouter } from "react-router";
import { RouterProvider } from "react-router/dom";
import { routes } from "./routes.jsx";

const router = createBrowserRouter(routes);

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

Line 2 imports createBrowserRouter, which uses pushState and popstate as the browser version of the tiny store did. Line 3 imports RouterProvider from react-router/dom, the version React Router recommends in the browser. Line 6 makes the router once, outside any component, so it isn't made again on every render.

One difference matters: React Router doesn't take the first route that fits. It ranks the routes and picks the most specific one, so /teas beats * wherever you write them. How to read the table: each row is one job of a router, done in the tiny router and in React Router.

React Router also has two other ways to use it. In declarative mode you write routes as <Routes> and <Route> elements inside a <BrowserRouter>, with no loaders. In framework mode a build plugin finds your routes, splits the code per page, and can render pages on the server. This lesson uses the middle one, data mode, which has loaders without the build plugin.

TanStack Router (version 1.170.46 in October 2026) is the other common choice. It does the same jobs, and is built around TypeScript: it knows every route, so a link to a route that doesn't exist, or a missing param, is a type error. It also checks search params against a schema and caches loader data. Here is a route in it, as a sketch:

import { createRoute } from "@tanstack/react-router";

const teaRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "/teas/$teaId",
  loader: ({ params }) => fetchTea(params.teaId),
  component: TeaPage,
});

Line 5 writes the param as $teaId instead of :teaId, and line 6 is a loader, like React Router's. The ideas in this lesson carry over to either one.

Nested routes share a layout

Most pages of a site share parts: a header, a menu, a search box. An account area adds its own tabs. With nested routes, each part is drawn once, by the route that owns it. Type in the search box, then click around:

1import { createMemoryRouter, NavLink, Outlet, RouterProvider } from "react-router@8.5.0?dev&deps=react@19.3.1,react-dom@19.3.1";2import { useState } from "react";3import AddressBar from "./AddressBar.jsx";4 5function Layout() {6  const [search, setSearch] = useState("");7  return (8    <>9      <AddressBar />10      <nav>11        <NavLink to="/" end>Home</NavLink>12        <NavLink to="/account">Account</NavLink>13        <input placeholder="Search teas" value={search} onChange={(event) => setSearch(event.target.value)} />14      </nav>15      <Outlet />16    </>17  );18}19 20function Home() {21  return <h2>Welcome to the tea shop</h2>;22}23 24function AccountLayout() {25  return (26    <section>27      <h2>Your account</h2>28      <nav>29        <NavLink to="/account" end>Orders</NavLink>30        <NavLink to="/account/profile">Profile</NavLink>31      </nav>32      <Outlet />33    </section>34  );35}36 37function Orders() {38  return <p>2 orders: green tea, chai</p>;39}40 41function Profile() {42  return <p>Name: Asha</p>;43}44 45const router = createMemoryRouter([46  {47    path: "/",48    Component: Layout,49    children: [50      { index: true, Component: Home },51      {52        path: "account",53        Component: AccountLayout,54        children: [55          { index: true, Component: Orders },56          { path: "profile", Component: Profile },57        ],58      },59    ],60  },61]);62 63export default function App() {64  return <RouterProvider router={router} />;65}

The route on lines 46 to 60 draws Layout; inside it, the account route on lines 51 to 58 draws AccountLayout, and inside that, the index route on line 55 draws Orders at /account and line 56 draws Profile at /account/profile. Each layout has an <Outlet /> (lines 15 and 32) for the level below it.

Type chai in the search box, click Account, then Profile. The text stays. Both addresses fit the same Layout route, so React keeps the same Layout and only swaps what's in its Outlet: its state on line 6 lives on, as the Preserving and resetting state lesson explains. Nothing is reloaded; only the part that changed renders anew.

The menus use NavLink, a Link that knows whether it points at the current page. It adds the class active (bold, from styles.css) and aria-current="page", which screen readers announce. The end on lines 11 and 29 means "only the exact address": without it, /account would also count as active on /account/profile, because that address starts with it.

Loading a page's data at the route

A tea page needs the tea's data from a server. In the Fetching data lesson, a component asked for its data in an effect, after it rendered. A router knows sooner: the moment you click, the address says which routes will show. So React Router lets each route have a loader, a function that gets the route's data before its page renders. The api.js tab is a pretend server that answers after 0.8 seconds.

1import { createMemoryRouter, Link, Outlet, RouterProvider, useLoaderData, useRouteError } from "react-router@8.5.0?dev&deps=react@19.3.1,react-dom@19.3.1";2import AddressBar from "./AddressBar.jsx";3import { fetchTea } from "./api.js";4 5function Home() {6  return <h2>Welcome to the tea shop</h2>;7}8 9function TeaPage() {10  const tea = useLoaderData();11  return (12    <>13      <h2>{tea.name}</h2>14      <p>${tea.price}, {tea.stock} left</p>15    </>16  );17}18 19function TeaError() {20  const error = useRouteError();21  return <p>Sorry: {error.message}</p>;22}23 24function Layout() {25  return (26    <>27      <AddressBar />28      <nav>29        <Link to="/">Home</Link>30        <Link to="/teas/green">Green tea</Link>31        <Link to="/teas/mint">Mint tea</Link>32        <Link to="/teas/oolong">Oolong</Link>33      </nav>34      <Outlet />35    </>36  );37}38 39const router = createMemoryRouter([40  {41    path: "/",42    Component: Layout,43    children: [44      { index: true, Component: Home },45      {46        path: "teas/:teaId",47        Component: TeaPage,48        loader: ({ params }) => fetchTea(params.teaId),49        ErrorBoundary: TeaError,50      },51    ],52  },53]);54 55export default function App() {56  return <RouterProvider router={router} />;57}

Line 48 gives the tea route a loader: it gets the params and returns fetchTea(params.teaId), a promise. The router waits for it, then renders TeaPage, which reads the answer with useLoaderData() on line 10. There's no effect, no Loading… state, and no null check: when TeaPage renders, its data is there. If the loader throws or its promise fails, the router shows the route's ErrorBoundary (line 49) in the page's place, and TeaError reads the error with useRouteError() on line 20. It works like the error boundaries you know, for data.

Click Green tea with the console open: Request 1: tea green appears right away, and the page changes 0.8 seconds later. Click Oolong: the loader's promise fails, and the page says Sorry: We don't sell "oolong". while the menu stays. Here is the same tea page with an effect, from the Fetching data lesson's pattern, to compare:

function TeaPage() {
  const { teaId } = useParams();
  const [tea, setTea] = useState(null);
  useEffect(() => {
    let ignore = false;
    fetchTea(teaId).then((data) => {
      if (!ignore) setTea(data);
    });
    return () => {
      ignore = true;
    };
  }, [teaId]);
  if (!tea) return <p>Loading…</p>;
  return <h2>{tea.name}</h2>;
}

Lines 3 to 12 are the state, the effect, and the cleanup that ignores a late answer, and line 13 is the loading state. With a loader, the router does that work. How to read the table: each row asks the same question of both ways to load the tea.

Loaders are a router's answer for the data a page needs to show at all. For data that changes while the page is open, or that many pages share, a data library keeps a cache; a loader can call it too.

Show that the next page is on its way

In the loader example, click Mint tea and look at the page for 0.8 seconds: nothing changes. The old page stays until the new one is ready, which is better than a blank page, but nothing says your click worked. The router knows a navigation is going on, and useNavigation() tells your components:

1import { createMemoryRouter, NavLink, Outlet, RouterProvider, useLoaderData, useNavigation, useRouteError } from "react-router@8.5.0?dev&deps=react@19.3.1,react-dom@19.3.1";2import AddressBar from "./AddressBar.jsx";3import { fetchTea } from "./api.js";4 5function Home() {6  return <h2>Welcome to the tea shop</h2>;7}8 9function TeaPage() {10  const tea = useLoaderData();11  return (12    <>13      <h2>{tea.name}</h2>14      <p>${tea.price}, {tea.stock} left</p>15    </>16  );17}18 19function TeaError() {20  const error = useRouteError();21  return <p>Sorry: {error.message}</p>;22}23 24function Layout() {25  const navigation = useNavigation();26  const loading = navigation.state === "loading";27  return (28    <>29      <AddressBar />30      <nav>31        <NavLink to="/" end>Home</NavLink>32        <NavLink to="/teas/green">Green tea</NavLink>33        <NavLink to="/teas/mint">Mint tea</NavLink>34        <NavLink to="/teas/oolong">Oolong</NavLink>35      </nav>36      {loading && <p>Loading {navigation.location.pathname}…</p>}37      <div style={{ opacity: loading ? 0.5 : 1 }}>38        <Outlet />39      </div>40    </>41  );42}43 44const router = createMemoryRouter([45  {46    path: "/",47    Component: Layout,48    children: [49      { index: true, Component: Home },50      {51        path: "teas/:teaId",52        Component: TeaPage,53        loader: ({ params }) => fetchTea(params.teaId),54        ErrorBoundary: TeaError,55      },56    ],57  },58]);59 60export default function App() {61  return <RouterProvider router={router} />;62}

Line 25 reads the navigation. Its state is "idle" when nothing is happening and "loading" while loaders run for the next page (and "submitting" while a form is sent). Line 36 says which address is loading, from navigation.location, and line 37 fades the old page. The menu is made of NavLinks, and a NavLink also knows when its own page is the one loading: it gets the class pending, which styles.css shows in italics.

Click Mint tea. For 0.8 seconds the page says Loading /teas/mint…, Home fades, and Mint tea in the menu is in italics. The address bar still says shop.example/: the router changes the address and the page together, when the data is ready.

This is the same "keep the old page while the new one loads" you met in Transitions. React Router also starts its updates inside startTransition, so a page that suspends with Suspense while it renders keeps the old page on screen too, instead of a fallback.

A sort order that lives in the address

The path names the page. The search params, the part after ?, hold options for that page, like how a list is sorted: /teas?sort=price. Because they're part of the address, a link, a bookmark, and a refresh all bring the same list back, and Back undoes a change. The URL & URLSearchParams lesson covers their format.

1import { createMemoryRouter, Link, Outlet, RouterProvider, useSearchParams } from "react-router@8.5.0?dev&deps=react@19.3.1,react-dom@19.3.1";2import AddressBar from "./AddressBar.jsx";3 4const teas = [5  { id: "green", name: "Green tea", price: 3 },6  { id: "chai", name: "Chai", price: 5 },7  { id: "mint", name: "Mint tea", price: 4 },8];9 10function Home() {11  return <h2>Welcome to the tea shop</h2>;12}13 14function TeaList() {15  const [searchParams, setSearchParams] = useSearchParams();16  const sort = searchParams.get("sort") ?? "name";17  const sorted = teas.toSorted((a, b) =>18    sort === "price" ? a.price - b.price : a.name.localeCompare(b.name),19  );20  return (21    <>22      <button onClick={() => setSearchParams({ sort: "name" })}>Sort by name</button>23      <button onClick={() => setSearchParams({ sort: "price" })}>Sort by price</button>24      <ul>25        {sorted.map((tea) => (26          <li key={tea.id}>{tea.name}: ${tea.price}</li>27        ))}28      </ul>29    </>30  );31}32 33function Layout() {34  return (35    <>36      <AddressBar />37      <nav>38        <Link to="/">Home</Link>39        <Link to="/teas?sort=price">Cheapest teas</Link>40      </nav>41      <Outlet />42    </>43  );44}45 46const router = createMemoryRouter(47  [48    {49      path: "/",50      Component: Layout,51      children: [52        { index: true, Component: Home },53        { path: "teas", Component: TeaList },54      ],55    },56  ],57  { initialEntries: ["/teas"] },58);59 60export default function App() {61  return <RouterProvider router={router} />;62}

Line 15 reads the search params with useSearchParams(), which works like a state hook kept in the address. Line 16 reads sort, or uses "name" when there isn't one, and lines 17 to 19 sort a copy of the list with toSorted. The buttons on lines 22 and 23 set the params, which adds a history entry, like a link. Line 57 starts the result at /teas.

Click Sort by price: the address becomes /teas?sort=price, and the list reads Green tea, Mint tea, Chai. Press Back: it's sorted by name again. The Cheapest teas link on line 39 goes straight to the sorted list, which is what a link from an email or an ad would do. A sort order kept in useState couldn't.

Common mix-ups

• "A link in a React app loads a new page from the server." No. The router stops the page load, changes the address, and renders the matching route. Only the first visit, or a refresh, loads the page from the server.
• "Routing is built into React." No. React has no router. It comes from a library like React Router or TanStack Router, or from a framework built on one.
• "Use navigate() for every menu item." No. Menus and lists of pages are links: they open in a new tab and screen readers announce them. navigate is for after something happens, like a placed order.
• "Changing the page re-renders the whole app from scratch." No. Layout routes stay on the page and keep their state; only the part in the Outlet changes.
• "A loader runs after the page renders." No. It starts with the navigation, and the page renders when its data is ready, so useLoaderData() already has it when the page renders.
• "Search params are only for search boxes." No. They're for any option of a page that a link should keep: a sort order, a filter, a page number, a tab.
• "In React Router, the order of my routes decides which one wins." No. It ranks routes and picks the most specific. The tiny router in this lesson takes the first that fits, which is why its * goes last.

Practice exercises

Most exercises use the tiny router, so the whole router is in the tabs to read. Press Edit & run to change the code, and use the drawn address bar to check your answer.

// The params when the path fits the pattern, or null when it doesn't.
function matchPath(pattern, path) {
  const want = pattern.split("/").filter(Boolean);
  const got = path.split("/").filter(Boolean);
  if (want.length !== got.length) return null;
  const params = {};
  for (let i = 0; i < want.length; i += 1) {
    if (want[i].startsWith(":")) params[want[i].slice(1)] = got[i];
    else if (want[i] !== got[i]) return null;
  }
  return params;
}

console.log(matchPath("/teas/:teaId/reviews", "/teas/chai/reviews"));

// The params when the path fits the pattern, or null when it doesn't.
function matchPath(pattern, path) {
  const want = pattern.split("/").filter(Boolean);
  const got = path.split("/").filter(Boolean);
  if (want.length !== got.length) return null;
  const params = {};
  for (let i = 0; i < want.length; i += 1) {
    if (want[i].startsWith(":")) params[want[i].slice(1)] = got[i];
    else if (want[i] !== got[i]) return null;
  }
  return params;
}

console.log(matchPath("/teas/:teaId/reviews", "/teas/chai/reviews"));

1import AddressBar from "./AddressBar.jsx";2import { Link, Routes } from "./router.jsx";3 4const teas = { green: "Green tea", mint: "Mint tea" };5 6function Home() {7  return <h2>Welcome to the tea shop</h2>;8}9 10function TeaList() {11  return (12    <ul>13      <li><Link to="/teas/green">Green tea</Link></li>14      <li><Link to="/teas/mint">Mint tea</Link></li>15      <li><Link to="/teas/oolong">Oolong</Link></li>16    </ul>17  );18}19 20function TeaPage({ params }) {21  return <h2>{teas[params.teaId] ?? `We don't sell "${params.teaId}"`}</h2>;22}23 24function NotFound() {25  return <h2>Page not found</h2>;26}27 28const routes = [29  { path: "*", Component: NotFound },30  { path: "/", Component: Home },31  { path: "/teas", Component: TeaList },32  { path: "/teas/:teaId", Component: TeaPage },33];34 35export default function App() {36  return (37    <>38      <AddressBar />39      <nav>40        <Link to="/">Home</Link>41        <Link to="/teas">Teas</Link>42      </nav>43      <Routes routes={routes} />44    </>45  );46}

1import AddressBar from "./AddressBar.jsx";2import { Link, Routes } from "./router.jsx";3 4const teas = { green: "Green tea", mint: "Mint tea" };5 6function Home() {7  return <h2>Welcome to the tea shop</h2>;8}9 10function TeaList() {11  return (12    <ul>13      <li><Link to="/teas/green">Green tea</Link></li>14      <li><Link to="/teas/mint">Mint tea</Link></li>15      <li><Link to="/teas/oolong">Oolong</Link></li>16    </ul>17  );18}19 20function TeaPage({ params }) {21  return <h2>{teas[params.teaId] ?? `We don't sell "${params.teaId}"`}</h2>;22}23 24function NotFound() {25  return <h2>Page not found</h2>;26}27 28const routes = [29  { path: "/", Component: Home },30  { path: "/teas", Component: TeaList },31  { path: "/teas/:teaId", Component: TeaPage },32  { path: "*", Component: NotFound },33];34 35export default function App() {36  return (37    <>38      <AddressBar />39      <nav>40        <Link to="/">Home</Link>41        <Link to="/teas">Teas</Link>42      </nav>43      <Routes routes={routes} />44    </>45  );46}

1import AddressBar from "./AddressBar.jsx";2import { Link, Routes } from "./router.jsx";3 4const teas = { green: "Green tea", mint: "Mint tea" };5 6function Home() {7  return <h2>Welcome to the tea shop</h2>;8}9 10function TeaList() {11  return (12    <ul>13      <li><Link to="/teas/green">Green tea</Link></li>14      <li><Link to="/teas/mint">Mint tea</Link></li>15      <li><Link to="/teas/oolong">Oolong</Link></li>16    </ul>17  );18}19 20function TeaPage({ params }) {21  return <h2>{teas[params.teaId] ?? `We don't sell "${params.teaId}"`}</h2>;22}23 24function NotFound() {25  return <h2>Page not found</h2>;26}27 28const routes = [29  { path: "/", Component: Home },30  { path: "/teas", Component: TeaList },31  { path: "/teas/:id", Component: TeaPage },32  { path: "*", Component: NotFound },33];34 35export default function App() {36  return (37    <>38      <AddressBar />39      <nav>40        <Link to="/">Home</Link>41        <Link to="/teas">Teas</Link>42      </nav>43      <Routes routes={routes} />44    </>45  );46}

1import AddressBar from "./AddressBar.jsx";2import { Link, Routes } from "./router.jsx";3 4const teas = { green: "Green tea", mint: "Mint tea" };5 6function Home() {7  return <h2>Welcome to the tea shop</h2>;8}9 10function TeaList() {11  return (12    <ul>13      <li><Link to="/teas/green">Green tea</Link></li>14      <li><Link to="/teas/mint">Mint tea</Link></li>15      <li><Link to="/teas/oolong">Oolong</Link></li>16    </ul>17  );18}19 20function TeaPage({ params }) {21  return <h2>{teas[params.teaId] ?? `We don't sell "${params.teaId}"`}</h2>;22}23 24function NotFound() {25  return <h2>Page not found</h2>;26}27 28const routes = [29  { path: "/", Component: Home },30  { path: "/teas", Component: TeaList },31  { path: "/teas/:teaId", Component: TeaPage },32  { path: "*", Component: NotFound },33];34 35export default function App() {36  return (37    <>38      <AddressBar />39      <nav>40        <Link to="/">Home</Link>41        <Link to="/teas">Teas</Link>42      </nav>43      <Routes routes={routes} />44    </>45  );46}

1import AddressBar from "./AddressBar.jsx";2import { Link, Routes } from "./router.jsx";3 4function Home() {5  return <h2>Welcome to the tea shop</h2>;6}7 8function Cart() {9  function placeOrder() {10    // Send the order to the server here, then show /thanks.11  }12  return (13    <>14      <h2>Your cart: 2 teas</h2>15      <button onClick={placeOrder}>Place order</button>16    </>17  );18}19 20function Thanks() {21  return <h2>Thanks for your order!</h2>;22}23 24const routes = [25  { path: "/", Component: Home },26  { path: "/cart", Component: Cart },27  { path: "/thanks", Component: Thanks },28];29 30export default function App() {31  return (32    <>33      <AddressBar />34      <nav>35        <Link to="/">Home</Link>36        <Link to="/cart">Cart</Link>37      </nav>38      <Routes routes={routes} />39    </>40  );41}

1import AddressBar from "./AddressBar.jsx";2import { Link, Routes, navigate } from "./router.jsx";3 4function Home() {5  return <h2>Welcome to the tea shop</h2>;6}7 8function Cart() {9  function placeOrder() {10    // Send the order to the server here, then:11    navigate("/thanks");12  }13  return (14    <>15      <h2>Your cart: 2 teas</h2>16      <button onClick={placeOrder}>Place order</button>17    </>18  );19}20 21function Thanks() {22  return <h2>Thanks for your order!</h2>;23}24 25const routes = [26  { path: "/", Component: Home },27  { path: "/cart", Component: Cart },28  { path: "/thanks", Component: Thanks },29];30 31export default function App() {32  return (33    <>34      <AddressBar />35      <nav>36        <Link to="/">Home</Link>37        <Link to="/cart">Cart</Link>38      </nav>39      <Routes routes={routes} />40    </>41  );42}

1import AddressBar from "./AddressBar.jsx";2import { Link, Routes, navigate } from "./router.jsx";3 4function Home() {5  return <h2>Welcome to the tea shop</h2>;6}7 8function Cart() {9  function placeOrder() {10    // Send the order to the server here, then:11    navigate("/thanks");12  }13  return (14    <>15      <h2>Your cart: 2 teas</h2>16      <button onClick={placeOrder}>Place order</button>17    </>18  );19}20 21function Thanks() {22  return <h2>Thanks for your order!</h2>;23}24 25const routes = [26  { path: "/", Component: Home },27  { path: "/cart", Component: Cart },28  { path: "/thanks", Component: Thanks },29];30 31export default function App() {32  return (33    <>34      <AddressBar />35      <nav>36        <Link to="/">Home</Link>37        <Link to="/cart">Cart</Link>38      </nav>39      <Routes routes={routes} />40    </>41  );42}

1import AddressBar from "./AddressBar.jsx";2import { Link, Routes, replace } from "./router.jsx";3 4function Home() {5  return <h2>Welcome to the tea shop</h2>;6}7 8function Cart() {9  function placeOrder() {10    // Send the order to the server here, then:11    replace("/thanks");12  }13  return (14    <>15      <h2>Your cart: 2 teas</h2>16      <button onClick={placeOrder}>Place order</button>17    </>18  );19}20 21function Thanks() {22  return <h2>Thanks for your order!</h2>;23}24 25const routes = [26  { path: "/", Component: Home },27  { path: "/cart", Component: Cart },28  { path: "/thanks", Component: Thanks },29];30 31export default function App() {32  return (33    <>34      <AddressBar />35      <nav>36        <Link to="/">Home</Link>37        <Link to="/cart">Cart</Link>38      </nav>39      <Routes routes={routes} />40    </>41  );42}

1import { createMemoryRouter, Link, Outlet, RouterProvider, useLoaderData, useRouteError } from "react-router@8.5.0?dev&deps=react@19.3.1,react-dom@19.3.1";2import AddressBar from "./AddressBar.jsx";3import { fetchTea } from "./api.js";4 5function Home() {6  return <h2>Welcome to the tea shop</h2>;7}8 9function TeaPage() {10  const tea = useLoaderData();11  return (12    <>13      <h2>{tea.name}</h2>14      <p>${tea.price}, {tea.stock} left</p>15    </>16  );17}18 19function TeaError() {20  const error = useRouteError();21  return <p>Sorry: {error.message}</p>;22}23 24function Layout() {25  return (26    <>27      <AddressBar />28      <nav>29        <Link to="/">Home</Link>30        <Link to="/teas/green">Green tea</Link>31        <Link to="/teas/mint">Mint tea</Link>32        <Link to="/teas/oolong">Oolong</Link>33      </nav>34      <Outlet />35    </>36  );37}38 39const router = createMemoryRouter([40  {41    path: "/",42    Component: Layout,43    children: [44      { index: true, Component: Home },45      {46        path: "teas/:teaId",47        Component: TeaPage,48        loader: ({ params }) => fetchTea(params.teaId),49        ErrorBoundary: TeaError,50      },51    ],52  },53]);54 55export default function App() {56  return <RouterProvider router={router} />;57}

1import { createMemoryRouter, Link, Outlet, RouterProvider, useLoaderData, useNavigation, useRouteError } from "react-router@8.5.0?dev&deps=react@19.3.1,react-dom@19.3.1";2import AddressBar from "./AddressBar.jsx";3import { fetchTea } from "./api.js";4 5function Home() {6  return <h2>Welcome to the tea shop</h2>;7}8 9function TeaPage() {10  const tea = useLoaderData();11  return (12    <>13      <h2>{tea.name}</h2>14      <p>${tea.price}, {tea.stock} left</p>15    </>16  );17}18 19function TeaError() {20  const error = useRouteError();21  return <p>Sorry: {error.message}</p>;22}23 24function Layout() {25  const navigation = useNavigation();26  return (27    <>28      <AddressBar />29      <nav>30        <Link to="/">Home</Link>31        <Link to="/teas/green">Green tea</Link>32        <Link to="/teas/mint">Mint tea</Link>33        <Link to="/teas/oolong">Oolong</Link>34      </nav>35      {navigation.state === "loading" && <p>Loading…</p>}36      <Outlet />37    </>38  );39}40 41const router = createMemoryRouter([42  {43    path: "/",44    Component: Layout,45    children: [46      { index: true, Component: Home },47      {48        path: "teas/:teaId",49        Component: TeaPage,50        loader: ({ params }) => fetchTea(params.teaId),51        ErrorBoundary: TeaError,52      },53    ],54  },55]);56 57export default function App() {58  return <RouterProvider router={router} />;59}

Check your understanding

For each code question, find the address first, then follow what the router does with it.

Key takeaways

• A router makes the URL the state that decides the page, so pages can be bookmarked, shared, refreshed, and reached with Back.
• The address lives outside React. A router keeps it in a store, the browser's history on a real site, and components subscribe to it.
• A route pairs a path pattern with a component. A param like :teaId fits one part of the path and is read with useParams().
• Links draw real <a href> elements and change the page without a page load. navigate is for moving after an action; replace keeps Back sensible.
• Nested routes draw shared layouts once, with an <Outlet /> for the level below; layouts stay and keep their state.
• A route's loader starts with the click, and the page renders with its data. useNavigation() shows that the next page is on its way.
• Search params hold options a link should keep, like a sort order.

Coming next: State management libraries. It sorts the state an app keeps, including the address, and shows when a library like Zustand, Redux Toolkit, or Jotai helps.