Client-Side Routing with React Router

Single-page React applications render everything from JavaScript, so the browser's native URL-based navigation doesn't automatically map to different "pages." React Router (the react-router-dom package) solves this by letting you define routes that map URL paths to components, all rendered client-side without a full page reload.

React Router v6+ centers on a small set of components and hooks: BrowserRouter to enable routing, Routes and Route to declare which component renders for which path, Link and NavLink for navigation, and hooks like useParams and useNavigate to read route data and navigate programmatically.

Why it matters

A React application is a single HTML page, yet users expect addresses they can bookmark, a working back button and links they can share. A router maps the URL to the component that should be shown, without reloading the page. React Router is the standard library for it.

Setting Up Routes

The whole app is wrapped in a <BrowserRouter>, which uses the HTML5 history API to keep the UI in sync with the URL. Inside it, a <Routes> element contains one <Route> per path, each pairing a path with an element to render. Only the first matching route renders its element, and a path of "*" is commonly used as a catch-all "not found" route.

Navigating Between Routes

Use <Link to="/about"> instead of a plain <a href="/about"> for in-app navigation — Link intercepts the click and updates the URL without a full page reload, preserving application state. NavLink behaves the same way but also applies an "active" styling class automatically when its path matches the current URL, which is useful for navigation menus.

Reading URL Parameters and Navigating Programmatically

Dynamic segments in a path, like /users/:id, are read inside the matching component with the useParams() hook, which returns an object such as { id: "42" }. For navigation that must happen in response to logic rather than a direct click — after a form submits successfully, for example — the useNavigate() hook returns a function you call with a path, such as navigate("/dashboard") or navigate(-1) to go back.

• useParams() — reads dynamic segments like :id from the current URL.
• useNavigate() — returns a function to navigate imperatively, e.g. after an async action completes.
• useLocation() — gives access to the current URL, search params, and any navigation state.

Example

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

function Home() {
  return <h1>Welcome Home</h1>;
}

function UserProfile() {
  const { id } = useParams();
  const navigate = useNavigate();

  return (
    <div>
      <h1>User Profile #{id}</h1>
      <button onClick={() => navigate('/')}>Back to Home</button>
    </div>
  );
}

function NotFound() {
  return <h1>404 — Page Not Found</h1>;
}

export default function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link> | <Link to="/users/42">User 42</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/users/:id" element={<UserProfile />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

A nav bar with two links is always visible. Clicking "User 42" changes the URL to /users/42 and renders "User Profile #42" with a "Back to Home" button; clicking that button calls navigate("/") and returns to the Home view — all without a full page reload.

Exercise

Do this in a Vite + React project after installing the router with npm install react-router-dom. In src/App.jsx, set up three routes: / shows a Home component, /about shows an About component, and /users/:id shows a User component that displays the id from the URL. Add navigation links to Home and About.

Expected result: clicking the links changes the URL and the content without a page reload, and visiting /users/42 shows "User 42".

import { BrowserRouter, Link, Route, Routes, useParams } from "react-router-dom";

function Home() {
  return <h1>Home</h1>;
}

function About() {
  return <h1>About</h1>;
}

function User() {
  // TODO: read the id from the URL
  return <h1>User</h1>;
}

export default function App() {
  return (
    <BrowserRouter>
      {/* TODO: a nav with links to "/" and "/about" */}
      {/* TODO: the three routes */}
    </BrowserRouter>
  );
}

import { BrowserRouter, Link, Route, Routes, useParams } from "react-router-dom";

function Home() {
  return <h1>Home</h1>;
}

function About() {
  return <h1>About</h1>;
}

function User() {
  const { id } = useParams();
  return <h1>User {id}</h1>;
}

export default function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link> <Link to="/about">About</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/users/:id" element={<User />} />
      </Routes>
    </BrowserRouter>
  );
}

Quick quiz

Interview questions