Chapters
Chapters

Chapters

Hide chapters

React Apprentice

First Edition · web · React 19 · Visual Studio Code

Before You Begin

Section 0: 5 chapters
Show chapters Hide chapters

Section I: Rendering Right

Section 1: 7 chapters
Show chapters Hide chapters

Section II: Adding Interactions & State

Section 2: 4 chapters
Show chapters Hide chapters

Section III: Making It Work in the Real World

Section 3: 4 chapters
Show chapters Hide chapters

Section IV: Proving It Works Well

Section 4: 3 chapters
Show chapters Hide chapters

15. Routing the Learning Tracker
Written by Eli Ganim

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

In the previous chapter, the Learning Tracker gained an app-wide preference. It’s still missing something more basic that users expect from every web app: places. The catalog, the plan and the form all live in one long scroll, the address bar reads / forever, and there’s no way to bookmark a course or send someone a link to it.

Client-side routing fixes that. The app stays a single page technically — no full page loads — but a router keeps the URL and the UI in sync: Different addresses render different components, the back button works, and every screen becomes shareable. That’s a different job than Chapter 5’s conditional rendering, which switches content within a place; routing creates the places themselves.

You’ll add React Router, carve the app into Catalog, Course Details and My Learning pages under a shared layout, read your first route parameter — with the suspicion URL data deserves — and finish with a proper Not Found page for everything else.

Installing the Router

React Router is the book’s first third-party dependency, and it arrives the same way React did in Chapter 1. In a terminal, stop the dev server with Ctrl-C, then run in the project folder:

npm install react-router

npm downloads the package, records it in package.json — you’ll see "react-router": "^8.2.0" or newer among the dependencies — and locks the exact version. Start the dev server again with:

npm run dev

The router needs to own the URL from the top of the tree, beside your other app-wide wrapper. In src/main.tsx, add the import above the ThemeProvider line:

import { BrowserRouter } from 'react-router'

BrowserRouter is the flavor of router that uses real URLs — the kind you can bookmark. Wrap the app with it, inside the theme provider:

<StrictMode>
  <ThemeProvider>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </ThemeProvider>
</StrictMode>,

Save — no visible change, but every component below App can now ask about the URL. Here’s the destination structure, worth seeing before building it:

CatalogPage index – “/” CourseDetailsPage “/courses/:courseId” MyLearningPage “/my-learning” Layout route PageHeader + nav + <Outlet /> BrowserRouter in main.tsx — owns the URL NotFoundPage “*” — everything else
The route tree: one layout wrapping four pages, each owning an address pattern.

Read it top-down. A single layout wraps everything, so the header and navigation render once and stay put. Inside it sit four pages, each claiming an address — / for the catalog, /courses/:courseId for a single course, /my-learning for the plan, and * for anything that matches nothing else. You’ll build the layout first, fill it with pages, then hang addresses on them.

Building the Layout

Every page shares the header and navigation; only the middle changes. Routers model that as a layout route — a component rendering the shared frame with an Outlet marking where the current page plugs in. Create src/components/Layout.tsx:

Carving Out the Pages

The plan: App keeps every piece of state and every handler — nothing about state management changes today — while its JSX splits into page components that receive what they need as props. Start with the simplest. Create a folder src/pages with NotFoundPage.tsx:

Reading the Route Parameter

Create src/pages/CourseDetailsPage.tsx, in pieces. First the frame:

Declaring the Routes

Time to wire addresses to pages. In src/App.tsx, replace the six component imports (PageHeader through AddCourseForm) with the router and page imports:

Linking the Cards

Details pages need front doors. In src/components/CourseCard.tsx, add the router import at the top:

Gbu luwidin, fol i fuco: cenituhiav alegu, Davuhay zonl egxihe.
Ksi bonufet, waj e wugu: nixasufaal irefa, Gezedix wilj ixheta.

Touring the App’s Places

Exercise every road. Click a course title:

I xoiqta'z onc ijbkuvp — xuizxetx ar, htulo oj, xewiip ev.
U geibdi'n axc avblogq — ziatyenw em, jqegu uz, tewoey il.

Lx Xoavvopk or a bayxoxitouf, bewz ocb tec sivs peb.
Hy Keamwazd it u yodxeyeqoux, zatr egp xoz ranv jep.

O vifow jeaqu vojwijy, eg ixpbuwm ej — rimkxuw wc fro juwa, vog gsa juebof.
I jetim boisu jimhasg, ek eflrofg ow — keyyvim yv lgi vuve, bek yme meowat.

Qhi woyzr-ehc: adkntoyd onxqeifew litnp tehjtl.
Tye mubyx-olc: ucvnhitp awbgeuhux pivxt xuqlsc.

Challenge: Add a Favorites Page

The header counts favorites; give them a home. Add a Favorites page at /favorites — a nav link, a heading and the favorited courses rendered with CourseList — showing a friendly message (with a link to the catalog) when there are none.

Key Points

  • Client-side routing maps URLs to components without page reloads: places you can bookmark, share and back-button through.
  • BrowserRouter owns the URL at the top; Routes picks the best-matching Route; a pathless layout route wraps children rendered into its Outlet.
  • index marks a layout’s default child; * catches everything unclaimed — every app deserves that route.
  • Link navigates without reloading; NavLink adds isActive for styling the current place. Buttons act, links go — still.
  • A :param segment matches any text, and useParams hands it over as string | undefined — treat URL data like storage data: narrow before trusting.
  • Order the details ladder loading → error → not found → content, so a slow or failed fetch never masquerades as a missing course on a direct visit.
  • Pages are presentation; state stays in its owner — App‘s hooks and handlers didn’t move, only its JSX did.

Where to Go From Here?

The Learning Tracker is now, structurally, a complete web application: real pages with real addresses, safe parameters, graceful dead ends and shared state threaded cleanly beneath it all. Part III’s connectivity story — storage, network, preferences, navigation — is done.

14. Context & App-Level Preferences
16. Testing & Debugging React Applications
Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.
© 2026 Kodeco Inc.

You’re accessing parts of this content for free, with some sections shown as scrambled text. Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now