Command Palette

Search for a command to run...

Hectal
Phase 13Intermediate14 of 28 in React

Routing

Give your React app real URLs: client-side routing, React Router 8, params and search params, nested layouts, loaders and actions, guards and navigation UX.

Until now every app in this course lived at one address. Real apps have many pages: a home page, a product page for every product, a settings page, a login page. Each page needs its own URL (web address), so people can bookmark it, share it, refresh it and press the Back button. Routing is the job of choosing what to show for each URL. In a React app it happens in the browser, without loading a new HTML page, and that is called client-side routing.

This phase starts with how that works underneath (the browser's History API, why the server must send index.html for every path) and then teaches React Router 8, the most used routing library for React: Routes, Route, Link and NavLink; dynamic segments like /products/:id; search params for filters; nested layouts with <Outlet />; and data routers, where each route loads its own data with a loader and saves forms with an action before the page renders.

It ends with the parts that make routing feel professional: protected pages that send logged-out users to a login page and back, loading route code only when needed, scroll position, moving keyboard focus and updating the page title after every navigation. The live examples use memory routers because they run inside a small frame on this page; each one shows its current URL in a little address bar so you can watch navigation happen.

0/6 · 0%
6 topics ~3 h 25 code blocks & diagrams
Start with the first topic
1
13.1

What Client-Side Routing Is

Client-side routing lets a single-page app change the URL and the screen without asking the server for a new HTML page, using the browser's History API; the URL becomes part of your app's state, so pages can be bookmarked, shared and reloaded.

33 min 4 code practice

2
13.2

React Router Basics

React Router maps URLs to components: <Routes> picks the best <Route> for the current URL, <Link> changes the URL without reloading, and <NavLink> knows when it points at the current page; apps wrap everything in <BrowserRouter>, while tests and this preview use <MemoryRouter>.

30 min 4 code practice

3
13.3

Dynamic Segments, Params and Search Params

A dynamic segment like /products/:productId lets one route serve every product and useParams() reads the value; useSearchParams() reads and writes the ?key=value part for filters and sorting; useNavigate() moves the user from code, and useLocation() tells you exactly where you are.

33 min 4 code practice

4
13.4

Nested Routes and Layouts

Nested routes put routes inside routes, so a parent renders the shared frame (header, sidebar, tabs) and an <Outlet /> where the matching child appears; index routes fill the outlet at the parent's own URL, layout routes add a frame without a URL segment, * catches unknown paths, and links inside a route are relative to it.

29 min 4 code practice

5
13.5

Data Routers: Loaders and Actions

In data mode you define routes as objects with createBrowserRouter (or createMemoryRouter) and render them with <RouterProvider>; each route can have a loader that fetches its data before it renders, an action that handles its <Form> submissions, and an errorElement for failures, while useNavigation() tells you when a navigation is pending.

35 min 5 code practice

6
13.6

Protected Routes and Navigation UX

Protect pages by redirecting logged-out users to a login page with <Navigate> (or redirect in a loader) and sending them back afterwards; load route code only when it's needed; and do what a full page load did for free: reset or restore scroll, move keyboard focus to the new content, and update the page title.

35 min 4 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

1

Your first routes

The app has a router and a Home page. Add two more pages: About (path /about, heading <h1>About</h1>) and Contact (path /contact, heading <h1>Contact</h1>).

Beginner
2

One route for every product

The product list links to /products/1, /products/2 and /products/3 (which doesn't exist). Add one route with a dynamic segment, /products/:productId, rendered by ProductPage.

Intermediate
3

Filters in the URL

Make the three buttons filter the list using search params, not useState: #veg sets ?type=veg, #fruit sets ?type=fruit, and #all removes the type param completely.

Intermediate
4

A dashboard with nested routes

Turn the flat routes into nested ones. Dashboard (path dashboard) is a frame with <h2 id="dash-title">Dashboard</h2>, a nav, and an <Outlet /> where its pages appear.

Intermediate
5

Load data with a route loader

This app uses a data router. Give the recipes/:id route a loader that calls fetchRecipe(params.id) and returns the recipe. If the recipe doesn't exist (the fake API resolves null), throw data("Recipe not found", { status: 404 }).

Intermediate
6

Protect a page and send the user back

The /account page should only be visible when logged in. Write a RequireAuth component that renders its children when user is set, and otherwise renders <Navigate to="/login" replace state={{ from: location.pathname }} />. Wrap the account page in it.

Intermediate