Concept

Routes and links

A router maps URLs to components, so each screen has an address the user can bookmark and share. Links change the URL without reloading the page, and the router renders the matching route.

What a session covers

The tutor works through these with you, in conversation and code. A session ends when you have shown them, not when a video does.

Explain what a router does with the URL and why links do not reload the page
Set up routes for a few screens and link between them
Spot the <a href> used for in-app navigation

In practice

A few lines that show Routes and links doing its job.

TSX

import { createBrowserRouter, RouterProvider, Link } from "react-router-dom";

const router = createBrowserRouter([
  { path: "/", element: <Home /> },
  { path: "/orders", element: <Orders /> },
]);

function Nav() {
  return <nav><Link to="/">Home</Link> <Link to="/orders">Orders</Link></nav>;
}

<RouterProvider router={router} />

The common mistake

Watch for

Using an <a href> for in-app navigation. The browser performs a full page load, throwing away state and refetching everything. Use the router's Link.

What to know first

Your roadmap puts these before Routes and links, unless you already know them.

Function components

How it stays learned

Once a session shows you understand Routes and links, it comes back for review. Each review takes a minute and tells the memory model how well you still know it.

Day 3First recall, while it is fresh
Day 7Second, a week on
Day 18Last, when it has settled

Where it leads

Topics that build on Routes and links.

Next in the moduleDynamic segments →