🧭 Client-side Routing Concepts

What is client-side routing?

Imagine walking through a museum where, instead of you moving between rooms, the room transforms around you as you pick different exhibits. The sign above the door changes, you can retrace your steps, but you never actually walked anywhere. That is client-side routing: the URL in the address bar changes and the screen updates, but the browser never fetches a brand-new HTML document.

A React app ships as essentially one HTML file with a bundle of JavaScript. That's why we call it a single-page application (SPA). Without a router, that single page can only ever show one thing. React Router is the library that lets one page pretend to be many: it watches the URL, decides which component belongs to it, and swaps the visible content — all without a network round-trip or a white flash of reload.

Everything in this lesson orbits that one idea: a URL comes in, React Router picks the component, React renders it. Once that clicks, the rest is just syntax.

Server-side vs client-side routing

Before SPAs, every link took you back to the server. Understanding what changed makes React Router far less mysterious.

How React Router matches URLs

React Router leans on the browser's built-in History API (pushState, popState). When you click a <Link>, the router calls history.pushState to change the address bar without asking the server for anything. It then compares the new path against your list of routes, finds the best match, and renders that route's element.

The magic is that step "match" — it happens in memory, in milliseconds, with no server involved. When the user presses the browser back button, the History API fires a popState event, the router sees the URL rewind, and it re-matches. That's why back/forward "just work" in a well-built SPA.

Installing & wrapping your app

React Router ships as a separate package. For web apps you install react-router-dom:

npm install react-router-dom

Then you wrap your entire component tree in a router provider. BrowserRouter is the one to reach for — it uses real, clean URLs (/about, not /#/about). Wrap it once, at the very top, usually in main.jsx:

// main.jsx — the router lives above everything else
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    {/* BrowserRouter provides routing context to every component below */}
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

The core building blocks

With the provider in place, four pieces do almost all the work. Meet them once and you can build most apps.

1. <Routes> and <Route>

<Routes> is the switchboard: it looks at the current URL and renders the one best-matching <Route>. Each <Route> pairs a path with the component to show via the element prop.

import { Routes, Route } from 'react-router-dom';

function Home()     { return <h1>Welcome Home!</h1>; }
function About()    { return <h1>About Us</h1>; }
function Contact()  { return <h1>Contact Us</h1>; }
function NotFound() { return <h1>404 — Page Not Found</h1>; }

function App() {
  return (
    <Routes>
      <Route path="/"        element={<Home />} />
      <Route path="/about"   element={<About />} />
      <Route path="/contact" element={<Contact />} />
      {/* "*" is the catch-all: it matches anything not matched above */}
      <Route path="*"        element={<NotFound />} />
    </Routes>
  );
}

2. <Link> — navigate without reloading

This is the star of the show. A plain <a href> triggers a full page reload and throws away your app's state. <Link> renders a real anchor for accessibility but intercepts the click and hands it to the router instead.

import { Link } from 'react-router-dom';

function Navigation() {
  return (
    <nav>
      {/* ✅ Client-side navigation — no reload */}
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/contact">Contact</Link>
    </nav>
  );
}

function BadNavigation() {
  return (
    <nav>
      {/* ❌ These cause full page reloads and lose all state! */}
      <a href="/">Home</a>
      <a href="/about">About</a>
    </nav>
  );
}

3. <NavLink> — a Link that knows it's active

<NavLink> is <Link> with a superpower: it tells you whether its destination is the page you're currently on, so you can highlight it. The className (or style) prop can be a function that receives { isActive }.

import { NavLink } from 'react-router-dom';

function Navigation() {
  return (
    <nav>
      {/* "end" makes "/" match only the exact home path */}
      <NavLink to="/" end
        className={({ isActive }) => (isActive ? 'active' : '')}>
        Home
      </NavLink>

      <NavLink to="/about"
        style={({ isActive }) => ({
          fontWeight: isActive ? 'bold' : 'normal',
          textDecoration: isActive ? 'underline' : 'none',
        })}>
        About
      </NavLink>
    </nav>
  );
}

💡 Rule of thumb: Use <NavLink> for your main navigation bar (where highlighting the current page helps the user), and plain <Link> for one-off links inside content.

Dynamic routes & params

Hard-coding a route for every user or product is impossible — you don't know their IDs ahead of time. A dynamic segment, written with a colon, acts as a placeholder that matches any value and captures it.

// The ":userId" part is a placeholder — it matches /users/1, /users/ada, etc.
<Route path="/users/:userId" element={<UserProfile />} />
<Route path="/posts/:postId/comments/:commentId" element={<Comment />} />

Inside the matched component, the useParams hook hands you those captured values as a plain object:

import { useParams } from 'react-router-dom';

function UserProfile() {
  // The key name matches the ":userId" in the route path
  const { userId } = useParams();
  return <h1>User Profile: {userId}</h1>;
}

function Comment() {
  const { postId, commentId } = useParams();
  return (
    <div>
      <h2>Post: {postId}</h2>
      <h3>Comment: {commentId}</h3>
    </div>
  );
}

Visiting  /users/ada          → "User Profile: ada"
Visiting  /posts/7/comments/3 → "Post: 7"  /  "Comment: 3"

Navigating in code

Links cover clicks, but sometimes you need to navigate after something happens — a successful login, a saved form, a timeout. The useNavigate hook gives you a function that changes the route programmatically.

import { useNavigate } from 'react-router-dom';

function LoginForm() {
  const navigate = useNavigate();

  const handleSubmit = async (e) => {
    e.preventDefault();
    await loginUser();

    // Send the user to their dashboard after login
    navigate('/dashboard');

    // Replace history so "Back" won't return to the login form:
    // navigate('/dashboard', { replace: true });

    // Pass data along without putting it in the URL:
    // navigate('/dashboard', { state: { from: 'login' } });

    // Go back one entry (like the browser back button):
    // navigate(-1);
  };

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Log in</button>
    </form>
  );
}

Practice & Quiz

// Fill in the blanks so /, /about, and /contact each render,
// the current link is highlighted, and bad URLs show NotFound.
function App() {
  return (
    <div>
      <nav>
        {/* TODO: NavLink to "/", "/about", "/contact" */}
      </nav>
      {/* TODO: Routes with a Route for each page + a catch-all */}
    </div>
  );
}

import { Routes, Route, NavLink } from 'react-router-dom';

const linkClass = ({ isActive }) => (isActive ? 'active' : '');

function App() {
  return (
    <div>
      <nav>
        <NavLink to="/" end className={linkClass}>Home</NavLink>
        <NavLink to="/about" className={linkClass}>About</NavLink>
        <NavLink to="/contact" className={linkClass}>Contact</NavLink>
      </nav>

      <Routes>
        <Route path="/"        element={<Home />} />
        <Route path="/about"   element={<About />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="*"        element={<NotFound />} />
      </Routes>
    </div>
  );
}

import { Route, useParams, useNavigate } from 'react-router-dom';

// <Route path="/users/:userId" element={<UserProfile />} />
function UserProfile() {
  const { userId } = useParams();
  return <h1>Viewing user #{userId}</h1>;
}

function GoToUser() {
  const navigate = useNavigate();
  return (
    <button onClick={() => navigate('/users/42')}>
      Open user 42
    </button>
  );
}

Best Practices & Pitfalls

✅ Do

• Wrap your app in BrowserRouter exactly once, at the top of the tree
• Use <Link>/<NavLink> for user clicks and useNavigate for logic-driven redirects
• Always include a catch-all <Route path="*"> so unknown URLs show a friendly 404
• Give descriptive, hierarchical paths (/users/:userId/settings), not cryptic ones (/u/:id/s)
• Add end to a NavLink to="/" so it isn't highlighted on every page

❌ Don't

• Use <a href> for internal navigation — it reloads the page and destroys app state
• Reach back to the old v5 <Switch> / component= API — use v6+ <Routes> / element=
• Nest a second BrowserRouter inside your app
• Put secrets or huge blobs in the URL — use route state for transient data instead

Summary

📚 Additional Resources

• React Router — Routing (official docs)
• React Router — Navigating with Link and NavLink
• MDN — The History API

🚀 What's Next?

You now understand why routing works and can wire up basic screens. Next we get organized: the Route Configuration lesson shows how to define routes as data with createBrowserRouter, unlocking loaders, error boundaries, and nested layouts.