React Router

React Router is the routing layer originally built for single-page React apps, now maintained by Remix Software as a multi-strategy router: use it as a minimal library to add client-side navigation to any React app, or opt into full framework mode with @react-router/dev for file-based routes, server-side rendering, nested data loading, and code-splitting bundled into one Vite-powered toolchain.

With 56K+ GitHub stars, 46M+ weekly npm downloads, and an active release cadence spanning v6, v7, and v8, React Router underpins a large share of production React routing — from small SPAs pulling in just the react-router hooks and components to full-stack apps built entirely on its framework mode.

What You Get

• The react-router package: hooks (useNavigate, useParams, useLoaderData) and components (<Routes>, <Link>, <Outlet>) for client-side routing in any React app.
• @react-router/dev: a Vite plugin that turns React Router into a full framework — file-based routing, SSR, code splitting, and type-safe route modules.
• @react-router/fs-routes, @react-router/node, @react-router/serve: framework-mode building blocks for filesystem route conventions, Node runtime adapters, and a production server.
• create-react-router: a CLI scaffolder for bootstrapping new framework-mode projects from official templates.
• Nested data loading and mutations via route loader/action functions, with automatic revalidation and pending-UI hooks (useNavigation, useFetcher).

Common Use Cases

• Adding client-side navigation and nested layouts to an existing React SPA without adopting SSR.
• Building a full-stack React app with server rendering, data loading, and mutations via framework mode.
• Migrating a Remix application, since React Router v7 absorbed Remix’s framework runtime and APIs.
• Implementing type-safe, file-based route trees with automatically generated route types.

Under The Hood

Architecture: The core router (packages/react-router/lib/router/router.ts, ~7,700 lines) implements a framework-agnostic state machine — createRouter and createStaticHandler — handling route matching, navigation, data loading, submissions, and error boundaries independent of React. A React bindings layer (components.tsx, hooks.tsx, context.ts) subscribes to this router’s state via context (DataRouterContext, DataRouterStateContext) and exposes the public hooks/components. DOM-specific bindings (lib/dom) layer on browser history integration, link prefetching, and target=_blank handling. Framework mode (@react-router/dev) sits atop the same core: it compiles file-based route conventions (@react-router/fs-routes) into the same RouteObject shape the router already understands, then wires a runtime adapter (@react-router/node, @react-router/serve, @react-router/express, @react-router/cloudflare) for SSR — meaning library and framework modes share one execution engine, differing only in entrypoints and build tooling.

Tech Stack: TypeScript throughout (98.9% of the codebase), organized as a pnpm workspace monorepo with 10 publishable packages under packages/. Builds run through tsdown (a Rolldown-based bundler) orchestrated by wireit for incremental caching, producing dual development/production builds with React Server Components-aware entrypoints. Framework mode is built on Vite 7 as its dev server and bundler. Peer dependencies require React >=19.2.7 and Node >=22.22.0, tracking the newest React release trains closely.

Code Quality: Extensive automated coverage — 143 test files under packages/react-router/tests alone, run with Jest (unit, via jest-environment-jsdom and @testing-library/react) plus a separate Playwright-driven integration suite (integration/) that exercises the framework build end-to-end. A repo-wide ESLint config enforces react-hooks, jsx-a11y, and TypeScript rules, paired with Prettier formatting. Module boundaries are consistent — router state (router/), React bindings (hooks.tsx, components.tsx, context.ts), and DOM-specific code (dom/) are cleanly separated, so the router core has no DOM or React dependency.

API Design: The public API is layered for progressive adoption: <BrowserRouter>/<Routes>/<Route> for the simplest declarative case, createBrowserRouter(routes) for data-router features, and file-based routes.ts conventions for framework mode — all compiling down to the same RouteObject shape, so moving between modes doesn’t require relearning concepts. Hook naming mirrors React idioms (useNavigate, useParams, useLoaderData, useFetcher), and TypeScript route-module types are generated from the route config so loader/action signatures are checked at compile time. Getting started in library mode is a single install plus a router provider; framework mode adds a Vite plugin and a routes.ts file, with create-react-router templates removing most of that boilerplate.