React Router

Client-side routing for single-page apps - matching URLs to components, navigation, route params, and nested layouts.

What it is, in plain English: React itself has no built-in concept of pages or URLs -- it's just a UI library. React Router is the standard library that maps URL paths to components, so a React app can have multiple 'pages' that change the URL without a full page reload. It handles navigation, dynamic route parameters (like /users/:id), nested layouts, and reading/writing the browser's URL and history.

Giving a React app multiple "pages"

React itself only knows how to render components -- it has no idea what a URL is. React Router fills that gap: it watches the browser's URL and renders the matching component, all without a full page reload (which is what makes it a Single Page App).

Basic setup

// npm install react-router-dom

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}
// Visiting /about renders <About />. Visiting /contact renders <Contact />.
// No full page reload happens -- React swaps components instantly.

Navigation with Link (not <a>)

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

function Nav() {
  return (
    <nav>
      {/* ✗ <a href="/about"> would cause a FULL page reload */}
      {/* ✓ <Link> intercepts the click and updates the URL without reloading: */}
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  );
}

Dynamic route parameters

// :id is a placeholder -- matches anything in that position:
<Route path="/products/:id" element={<ProductDetail />} />

// Inside ProductDetail, read the matched value with useParams:
import { useParams } from "react-router-dom";

function ProductDetail() {
  const { id } = useParams();   // "/products/42" → id = "42"
  return <h1>Viewing product {id}</h1>;
}

Programmatic navigation

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

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

  function handleSubmit(e) {
    e.preventDefault();
    // ... log the user in ...
    navigate("/dashboard");   // redirect after successful login
  }

  return <form onSubmit={handleSubmit}>...</form>;
}

Try It Yourself (JSX)

// React Router -- mapping URLs to components
// (npm install react-router-dom -- shown conceptually here since it needs
//  a real browser URL/history to demonstrate live)

const ROUTER_EXAMPLE = `
import { BrowserRouter, Routes, Route, Link, useNavigate, useParams } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/products">Products</Link>
        <Link to="/about">About</Link>
      </nav>

<Routes>
        <Route path="/" element={<Home />} />
        <Route path="/products" element={<ProductList />} />
        <Route path="/products/:id" element={<ProductDetail />} />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

// Reading a dynamic route parameter:
function ProductDetail() {
  const { id } = useParams();   // from path "/products/:id"
  return <h1>Product #{id}</h1>;
}

// Programmatic navigation:
function CheckoutButton() {
  const navigate = useNavigate();
  function handleClick() {
    navigate("/checkout/confirm");
  }
  return <button onClick={handleClick}>Checkout</button>;
}
`;

console.log("React Router maps URL paths to components.");
console.log(ROUTER_EXAMPLE.trim());

// Demo: this concept WITHOUT react-router (a simple manual router)
// to show what react-router automates for you:
function SimpleRouter({ children }) {
  const [path, setPath] = React.useState(window.location.pathname || "/");

React.useEffect(() => {
    function handlePop() { setPath(window.location.pathname); }
    window.addEventListener("popstate", handlePop);
    return () => window.removeEventListener("popstate", handlePop);
  }, []);

function navigate(to) {
    window.history.pushState({}, "", to);
    setPath(to);
  }

return children({ path, navigate });
}

function App() {
  return (
    <SimpleRouter>
      {({ path, navigate }) => (
        <div>
          <button onClick={() => navigate("/")}>Home</button>
          <button onClick={() => navigate("/about")}>About</button>
          <p>Current path: {path}</p>
          {path === "/" && <p>Home page content</p>}
          {path === "/about" && <p>About page content</p>}
        </div>
      )}
    </SimpleRouter>
  );
}

Nested routes, layouts, and search params

Nested routes with a shared layout

import { Outlet } from "react-router-dom";

function DashboardLayout() {
  return (
    <div>
      <Sidebar />
      <main>
        <Outlet />   {/* the matched child route renders HERE */}
      </main>
    </div>
  );
}

function App() {
  return (
    <Routes>
      <Route path="/dashboard" element={<DashboardLayout />}>
        <Route index element={<DashboardHome />} />          {/* /dashboard */}
        <Route path="settings" element={<Settings />} />       {/* /dashboard/settings */}
        <Route path="billing" element={<Billing />} />         {/* /dashboard/billing */}
      </Route>
    </Routes>
  );
}
// Sidebar stays mounted across all /dashboard/* routes --
// only the <Outlet> content swaps as you navigate between them.

Reading and writing query parameters

import { useSearchParams } from "react-router-dom";

function ProductList() {
  const [searchParams, setSearchParams] = useSearchParams();
  const category = searchParams.get("category") ?? "all";  // ?category=shoes

  function filterBy(newCategory) {
    setSearchParams({ category: newCategory });   // updates the URL
  }

  return (
    <div>
      <button onClick={() => filterBy("shoes")}>Shoes</button>
      <p>Showing: {category}</p>
    </div>
  );
}

Protected routes (authentication-gated)

function ProtectedRoute({ children }) {
  const { user } = useAuth();
  const location = useLocation();

  if (!user) {
    // Redirect to login, remembering where they were trying to go:
    return <Navigate to="/login" state={{ from: location }} replace />;
  }

  return children;
}

<Route path="/dashboard" element={
  <ProtectedRoute><Dashboard /></ProtectedRoute>
} />

Data loaders, file-based routing, and SSR considerations

// React Router 6.4+ supports DATA LOADERS -- fetch data BEFORE rendering
// the route, eliminating the loading-spinner-then-content flash:
import { createBrowserRouter, RouterProvider, useLoaderData } from "react-router-dom";

const router = createBrowserRouter([
  {
    path: "/products/:id",
    element: <ProductDetail />,
    loader: async ({ params }) => {
      const res = await fetch(`/api/products/${params.id}`);
      return res.json();
    },
  },
]);

function ProductDetail() {
  const product = useLoaderData();   // already available, no loading state needed
  return <h1>{product.name}</h1>;
}

function App() {
  return <RouterProvider router={router} />;
}

File-based routing (Next.js convention vs React Router)

React Router uses explicit code-defined routes. Next.js (and frameworks like Remix) use file-based routing instead: the file structure under app/ or pages/ IS the route map — app/products/[id]/page.js automatically becomes the /products/:id route, no router configuration file needed. Both achieve the same outcome; file-based routing trades explicitness for convention, and is the direction the broader React ecosystem (Next.js App Router, Remix, TanStack Router) has been moving.

Official Sources

The Codex links only to official documentation. No third-party tutorials.