npmIntermediate

react-router

Declarative client-side routing for React — maps URLs to components with nested routes, loaders, and actions.

routingreactspanavigationfullstack

The Problem

A React app is a single HTML page. Clicking a link reloads the page and loses all state. You need URL changes to render different components without full reloads, while keeping the address bar in sync, supporting back/forward, and handling nested layouts.

Mental Model

React Router maps URL patterns to component trees. A <Route path='/users/:id'> renders when the URL matches. Nested routes render inside their parent's <Outlet>. v6.4+ adds loaders (fetch data before render) and actions (handle form submissions) — making it a full request/response model.

60-second start

Set up routing in a React app

npm install react-router
import { createBrowserRouter, RouterProvider } from 'react-router'

const router = createBrowserRouter([
  { path: '/', element: <Home /> },
  { path: '/about', element: <About /> },
  { path: '/users/:id', element: <UserProfile /> },
])
ReactDOM.createRoot(document.getElementById('root')!).render(
  <RouterProvider router={router} />
)

Use it when

Any React SPA needing URL-based navigation, nested layouts (dashboard sidebar + content), data loading tied to routes, form actions, protected routes.

Skip it when

Next.js (use its file-based router). Remix (built on React Router but adds SSR). Very simple apps with only one or two views — a state variable suffices.

Alternatives

tanstack-routerFully type-safe routes, file-based or code-based, excellent TypeScript DX.

wouterTiny (1.5kB) React Router alternative, great for small projects.

next.js routerFile-based, SSR-first. Use if you're already on Next.js.

Ready to explore the full API?

See every class, function, and relationship in an interactive graph.