In a traditional multi-page website, every link click sends a request to the server for a brand-new HTML document, producing a visible flash and a full reload. A Single Page Application (SPA) avoids this entirely: the browser loads a single HTML file once, and from then on JavaScript swaps the visible content in and out to simulate moving between pages.

React Router is the library that makes this illusion work: it watches the browser's URL and decides, without ever triggering a server round-trip, which components should be mounted on screen at any given moment.

React itself ships with no built-in routing solution — the de facto standard library for this job is react-router-dom. It works by watching the browser's current URL and using that value to decide which of your components should be rendered at any given moment, all without a full page reload.

Installing it (npm install react-router-dom) gives you the building blocks — BrowserRouter, Routes, Route, Link, and hooks like useParams and useNavigate — needed to wire an entire multi-page-feeling app on top of a single HTML document.

To make React Router work anywhere in your app, you wrap the entire component tree in a <BrowserRouter> at the root, typically right around <App />. This component plugs into the browser's History API, which is what lets it detect URL changes and keep the back and forward buttons behaving correctly.

Without this wrapper, none of React Router's other components — Routes, Route, Link, or any of its navigation hooks — have access to the routing context they need to function.

Route definitions live inside a <Routes> container, with each individual <Route> mapping one URL to one component. A Route takes two key props: path, the URL string to match, and element, the JSX that should render when that path is active.

React Router checks the current URL against each Route's path and renders only the matching element — so <Route path="/about" element={<About />} /> shows the About component only when the browser is at /about.

Standard <a href> tags should never be used for in-app navigation in a React Router application, because clicking one tells the browser to fetch a whole new HTML document — exactly the full-page reload an SPA is built to avoid. React Router's <Link> component replaces the anchor tag entirely.

A <Link to="/about"> intercepts the click, updates the URL via the History API, and lets React swap the rendered components instantly, with no reload and no white flash.

Real apps need URLs that vary, like /users/1 or /users/42, without writing a separate Route for every possible ID. React Router supports this with dynamic segments: prefixing a piece of the path with a colon, as in path="/users/:userId", tells the router that segment is a variable rather than a literal string.

Any value in that position of the URL — 1, bob, 99 — will match the route, and the actual matched value becomes available to the rendered component.

Once a dynamic route like /users/:userId matches, the rendered component still needs to know the actual value that was in the URL — for example, to fetch that specific user from an API. React Router's useParams hook provides exactly that.

Calling const { userId } = useParams() inside the matched component returns an object keyed by the dynamic segment names defined in the route, so visiting /users/42 gives you userId === '42' to use in your logic.

Not every navigation happens because a user clicked a <Link> — sometimes you need to redirect from inside your own logic, like after a login form successfully submits. React Router's useNavigate hook is built for this.

Calling const navigate = useNavigate() gives you a function you can call anywhere in your component, such as navigate('/dashboard') after an async API call resolves, to programmatically change the URL and trigger React Router to render the new matching route.

Routes can be nested inside other routes, which is the pattern behind layouts like a dashboard where a sidebar stays fixed but the central content changes with the URL. A parent <Route> wraps child <Route> elements, and the parent's component renders an <Outlet /> at the exact spot where the matching child should appear.

So visiting /dashboard/billing keeps the DashboardLayout (and its sidebar) mounted while swapping only the <Outlet /> content for the Billing component.

A catch-all 404 route is created by placing a <Route> with path="*" at the very bottom of your <Routes> list. The asterisk works as a wildcard that matches any URL that wasn't already matched by a route defined above it.

Because React Router checks routes in order and stops at the first match, this wildcard route only ever renders when nothing else did, making it the natural place to render a NotFound component for unrecognized URLs.

<NavLink> is React Router's alternative to <Link> built specifically for navigation menus where you want to visually highlight whichever link corresponds to the current page. It behaves identically to <Link> for navigation purposes, but it also passes an isActive boolean into a function you provide for its className or style prop.

That means you can write className={({ isActive }) => isActive ? 'active-link' : ''} and have the active menu item style itself automatically as the URL changes.

With BrowserRouter, Routes, dynamic parameters via useParams, programmatic redirects via useNavigate, nested layouts with Outlet, and a wildcard catch-all for 404s, you now have everything needed to build a complete, seamless single-page application. The URL changes, but the page never reloads.

The next step is connecting these routed views to real data, so the components rendered at each URL can fetch and display information from an API.

What is an SPA?. Welcome to SPA Navigation. In traditional websites, clicking a link causes the browser to fetch a completely new HTML document from the server, resulting in a white flash and a full page reload. A Single Page Application (SPA) works differently: it loads exactly ONE HTML file, and JavaScript dynamically swaps out the content to simulate moving between pages.

React Router. React itself doesn't have a built-in router. The industry standard library for this is react-router-dom. It tracks the browser's URL and determines which React components should be visible on the screen at any given time.

The BrowserRouter. To use React Router, you must wrap your entire application in a <BrowserRouter>. This component connects your app to the browser's History API, allowing it to listen for URL changes and update the back/forward buttons correctly.

Defining Routes. Inside your app, you define a <Routes> container, and inside that, individual <Route> components. A Route takes two main props: path (the URL string) and element (the JSX to render when the URL matches).

Which prop on the <Route> component is used to specify the component that should be rendered?

• →component
• →element

Navigation: The Link Component. To move between pages, you must NEVER use standard <a href> tags. A standard link tells the browser to fetch a new document, breaking the SPA and reloading the whole app. Instead, you use React Router's <Link> component. It intercepts the click and updates the URL instantly.

What prop does the <Link> component use to define the destination URL?

• →href
• →to

Dynamic Route Parameters. Often, you need URLs that are dynamic, like /users/1 or /users/42. You can define a dynamic parameter in your route path by prefixing a segment with a colon (:). This tells the router that this segment is a variable.

Extracting Parameters. Once you navigate to a dynamic route, the rendered component needs to know what that dynamic value is (e.g., to fetch the correct user from an API). You extract this value using the useParams hook provided by React Router.

Programmatic Navigation. Sometimes you need to change the page automatically from your logic, not because the user clicked a <Link>. For example, redirecting after a successful login or form submission. For this, we use the useNavigate hook.

Nested Routes. You can nest routes inside other routes! This is perfect for complex layouts like a Dashboard where a sidebar remains constant, but the central content changes based on the URL (e.g., /dashboard/settings vs /dashboard/billing). You render an <Outlet> component in the parent where the child routes should appear.

Which hook do you use to navigate from inside a component's logic (like a setTimeout callback)?

• →useParams
• →useNavigate

Catch-all Routes (404). To handle "404 Not Found" errors, you place a <Route> at the very bottom of your routing list with the path *. The asterisk acts as a wildcard. If none of the routes above it match the URL, this wildcard route will catch it.

NavLink (Active states). For navigation menus, you often want to highlight the link that corresponds to the page you are currently on. React Router provides <NavLink> which is just like <Link>, but it automatically passes an isActive boolean to its class/style props so you can style it dynamically.

Mastery Achieved. Router mastery achieved! You now know how to build a seamless, fast SPA with dynamic parameters, programmatic navigation, and nested layouts. Next up: integrating external data with API fetching!