React Router is a multi-strategy router for React bridging the gap from React 18 to React 19. It can be used maximally as a full-featured React framework or minimally as a library with your own architecture.
The library provides:
For detailed information about the package structure and dependencies, see Package Architecture. To understand which usage mode is right for your project, see Usage Modes. For guidance on upgrading from previous versions, see Migration from v6 and Remix.
Sources: README.md1-29 docs/index.md1-40
React Router can be used in three primary modes, allowing you to choose the right level of integration for your project:
A full-featured framework with file-system routing, automatic code splitting, server-side rendering, and integrated data loading. This mode provides the most features and conventions.
Framework Mode includes:
react-router dev, react-router build)@react-router/serveSources: docs/start/framework/installation.md1-43 docs/start/framework/routing.md1-100 docs/start/framework/route-module.md1-80
Minimal client-side routing using familiar React components. This mode is ideal for applications that want routing without build tools or server integration.
Library Mode provides:
<Routes>, <Route>)<Link>, <NavLink>)useParams, useLocation, useNavigate)Sources: docs/index.md10-18 docs/start/framework/routing.md334-356
Router objects with integrated data loading, using createBrowserRouter. This mode sits between Library and Framework modes, providing data features without requiring a build step.
Data Mode provides:
loader functionsaction functionsSources: docs/start/data/route-object.md1-50 docs/start/data/routing.md1-82
React Router is organized as a monorepo with a core package and optional platform adapters:
Package Ecosystem Diagram
Key Package Responsibilities
| Package | Purpose | Used In |
|---|---|---|
react-router | Core routing, SSR, data loading, hooks | All modes |
react-router-dom | v6 compatibility re-exports | Migration scenarios |
@react-router/dev | Build tooling, type generation, dev server | Framework Mode |
@react-router/node | Node.js runtime utilities, sessions | Server deployments |
@react-router/express | Express integration | Node.js servers |
@react-router/serve | Production server CLI | Standalone deployments |
@react-router/cloudflare | Cloudflare Workers adapter | Edge deployments |
@react-router/architect | AWS Lambda adapter | Serverless deployments |
The modular design allows developers to use only what they need. Library Mode requires only react-router. Data Mode adds no additional packages. Framework Mode uses @react-router/dev for development and a platform adapter for production.
For more details on package structure and dependencies, see Package Architecture.
Sources: README.md16-24 package.json1-111 packages/react-router-dom/README.md1-7
React Router provides a complete development and deployment workflow, especially in Framework Mode:
Workflow Diagram
Development Phase
react-router dev to start the development server.react-router/types/Build Phase
react-router build to create production bundlesProduction Phase
@react-router/serve or a custom serverSources: docs/start/framework/installation.md1-43 package.json4-33
At the heart of React Router is a powerful routing system that handles URL matching, data loading, and navigation:
Routing Flow Diagram
Key Routing Concepts
| Concept | Purpose | Code Entity |
|---|---|---|
| Route Matching | Maps URLs to route objects | matchRoutes() |
| Dynamic Segments | Extract parameters from URLs | :paramName in path |
| Nested Routes | Create hierarchical layouts | children array in route config |
| Index Routes | Default child for a parent | index: true or index() |
| Layout Routes | Share UI without URL segments | layout() in Framework Mode |
| Splat Routes | Catch-all segments | * in path |
Route Definition Patterns
Framework Mode uses a configuration file:
Data Mode uses route objects:
Library Mode uses components:
Sources: docs/start/framework/routing.md1-120 docs/start/data/routing.md1-100
React Router provides a comprehensive data loading and mutation system:
Data Flow Diagram
Data Loading Features
loader function in route modules)action function in route modules)clientLoader function)clientAction function)useFetcher())Sources: docs/start/framework/data-loading.md1-100 docs/start/framework/actions.md1-88 docs/how-to/middleware.md1-100
React Router provides multiple ways to navigate between routes:
Navigation Components
| Component | Purpose | Key Features |
|---|---|---|
<Link> | Basic navigation link | Standard anchor behavior, prefetch |
<NavLink> | Link with active states | Styling for active/pending states |
<Form> | Navigation via form submission | GET or POST, progressive enhancement |
<Navigate> | Imperative navigation component | Redirect on render |
Navigation Hooks
| Hook | Purpose | Returns |
|---|---|---|
useNavigate() | Programmatic navigation | navigate(to, options) function |
useNavigation() | Get current navigation state | { state, location, formData } |
useLocation() | Get current location | { pathname, search, hash, state } |
useParams() | Get URL parameters | Object with param values |
Navigation Methods
Sources: docs/start/framework/navigating.md1-100 docs/start/framework/pending-ui.md1-80
The following diagram shows how the main React Router components and hooks interact at the code level:
Sources: packages/react-router/lib/components.tsx202-221 packages/react-router/lib/hooks.tsx76-147 packages/react-router/index.ts166-185
React Router uses a layered context system to share state throughout the component tree:
| Context | Purpose | Key Data |
|---|---|---|
DataRouterContext | Router instance and configuration | router, navigator, basename |
DataRouterStateContext | Current router state | location, matches, navigation |
LocationContext | Location and navigation type | location, navigationType |
NavigationContext | Navigation utilities | basename, navigator, static |
RouteContext | Route-specific information | outlet, matches, isDataRoute |
FetchersContext | Fetcher state management | Map<string, FetcherData> |
Sources: packages/react-router/lib/context.ts97-220
Package Dependency Structure
The v7 ecosystem is organized around a core package with optional adapters and tooling:
Sources: README.md16-24 package.json1-111 packages/react-router/index.ts1-60
Key Package Roles
| Package | Purpose | Key Exports |
|---|---|---|
react-router | Core routing, SSR, data loading | createBrowserRouter, RouterProvider, createRequestHandler |
react-router-dom | Compatibility layer | Re-exports from react-router |
@react-router/dev | Build tooling | Vite plugin, CLI commands, type generation |
@react-router/node | Node.js utilities | createCookie, createSessionStorage, installGlobals |
@react-router/cloudflare | Edge deployment | Cloudflare Workers/Pages request handler |
@react-router/serve | Production server | CLI server with adapter support |
Sources: packages/react-router/index.ts244-293 README.md16-29
React Router implements a sophisticated data loading and mutation system:
Sources: packages/react-router/lib/hooks.tsx1180-1487 packages/react-router/lib/components.tsx738-750
React Router provides comprehensive development tools and build optimizations:
| System | Purpose | Key Features |
|---|---|---|
| Vite Plugin | Development server integration | HMR, route analysis, SSR |
| CLI Tools | Project management | Scaffolding, type generation |
| Build Pipeline | Production optimization | Code splitting, manifests |
| Platform Adapters | Deployment targets | Node.js, Cloudflare, Lambda |
The development workflow supports both traditional SPA development and modern full-stack applications with server-side rendering, React Server Components, and advanced optimization features like "fog of war" route discovery.
Refresh this wiki