Routing

This section documents React 19.x for the web, using function components and Hooks throughout (class components appear only where React still requires them, such as error boundaries). React Native is out of scope and gets only a pointer. The React 19 additions follow the current official React documentation. This content was generated with the assistance of AI and should be verified against react.dev before being relied on in production, since React APIs continue to evolve between releases.

This section’s bibliography lists the reference material consulted while preparing these pages.

React itself has no router. Client-side routing — mapping the URL to which components render, without a full page reload — is provided by a library. This page is a short orientation; follow the links for the full reference.

The options

  • React Router — the most widely used; its data APIs add loaders, actions, and pending UI. Also runs as a full framework (formerly Remix).

  • TanStack Router — type-safe routes and search params, first-class data loading.

  • Framework routers — Next.js App Router (file-system routes, Server Components), Expo Router for React Native. If you use a framework, use its router.

Minimal examples (React Router)

Declaring routes, including a nested route and a lazy one:

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

const router = createBrowserRouter([
  {
    path: '/',
    element: <Layout />,
    children: [
      { index: true, element: <Home /> },
      { path: 'products/:id', element: <Product /> },
      { path: 'reports', lazy: () => import('./routes/reports.jsx') },
    ],
  },
]);

<RouterProvider router={router} />;

Route params and query params:

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

function Product() {
  const { id } = useParams();                 // "products/:id"
  const [searchParams] = useSearchParams();
  const tab = searchParams.get('tab') ?? 'overview';   // ?tab=specs
  return <h1>Product {id} — {tab}</h1>;
}

Links and programmatic navigation:

import { Link, NavLink, useNavigate } from 'react-router-dom';

<Link to="/products/42">View</Link>
<NavLink to="/reports" className={({ isActive }) => (isActive ? 'on' : undefined)}>
  Reports
</NavLink>;

function SaveButton() {
  const navigate = useNavigate();
  return <button onClick={() => navigate('/products/42')}>Go</button>;
}

Lazy routes pair with code splitting: each route’s component is its own chunk, downloaded on first visit. For everything else — data loading, nested layouts, error elements, scroll restoration — see reactrouter.com, tanstack.com/router, or the Next.js docs.