1---2name: react-router3description: React Router - multi-strategy router for React bridging React 18 to React 19. Use when building React applications with routing, data loading, SSR, or SPA architectures.4---5
6# React Router
7
8> The skill is based on React Router v7.13.0, generated at 2026-01-31.
9
10React Router is a multi-strategy router for React bridging the gap from React 18 to React 19. You can use it maximally as a React framework or as minimally as you want. It supports three modes: Declarative (basic routing), Data (with loaders/actions), and Framework (full-featured with type safety and code splitting).
11
12## Core References
13
14| Topic | Description | Reference |
15|-------|-------------|-----------|
16| Modes | Three usage modes: Framework, Data, and Declarative - choosing the right approach | [core-modes](references/core-modes.md) |
17| Routing | Route configuration, path patterns, nested routes, layout routes, and route matching | [core-routing](references/core-routing.md) |
18| Navigation | Navigation components and hooks: Link, NavLink, Form, useNavigate, redirect | [core-navigation](references/core-navigation.md) |
19| Data Loading | Loading data with loaders and clientLoaders in route modules | [core-data-loading](references/core-data-loading.md) |
20| Actions | Data mutations with actions and clientActions in route modules | [core-actions](references/core-actions.md) |
21| Route Module | Route module API: component, loader, action, error boundary, headers, meta, and more | [core-route-module](references/core-route-module.md) |
22| Hooks | Essential React Router hooks: useNavigation, useLocation, useParams, useMatches, and more | [core-hooks](references/core-hooks.md) |
23
24## Features
25
26### Data Management
27
28| Topic | Description | Reference |
29|-------|-------------|-----------|
30| Fetchers | Using fetchers for concurrent data interactions without navigation | [features-fetchers](references/features-fetchers.md) |
31| Error Handling | Error boundaries, error handling, and error responses | [features-error-handling](references/features-error-handling.md) |
32| Middleware | Middleware for authentication, logging, and request processing | [features-middleware](references/features-middleware.md) |
33
34### Forms and User Input
35
36| Topic | Description | Reference |
37|-------|-------------|-----------|
38| Form Validation | Form validation patterns, error handling, and user feedback | [features-form-validation](references/features-form-validation.md) |
39| File Uploads | Handling file uploads with multipart form data and file storage | [features-file-uploads](references/features-file-uploads.md) |
40| Search Params | Working with URL search parameters using useSearchParams hook | [features-search-params](references/features-search-params.md) |
41
42### Navigation and UX
43
44| Topic | Description | Reference |
45|-------|-------------|-----------|
46| View Transitions | Smooth page transitions using View Transitions API | [features-view-transitions](references/features-view-transitions.md) |
47| Navigation Blocking | Blocking navigation with useBlocker for unsaved form data | [features-navigation-blocking](references/features-navigation-blocking.md) |
48
49## Best Practices
50
51| Topic | Description | Reference |
52|-------|-------------|-----------|
53| Type Safety | Type safety with Route types, automatic type inference, and type generation | [best-practices-type-safety](references/best-practices-type-safety.md) |
54
55## Advanced
56
57| Topic | Description | Reference |
58|-------|-------------|-----------|
59| Streaming | Streaming with Suspense, deferring non-critical data, and React Suspense integration | [advanced-streaming](references/advanced-streaming.md) |
60| Pre-rendering | Pre-rendering static pages at build time for faster page loads | [advanced-pre-rendering](references/advanced-pre-rendering.md) |
61| SPA Mode | Single Page App mode with SSR disabled and client-side routing | [advanced-spa-mode](references/advanced-spa-mode.md) |
62
63## Key Recommendations
64
65- **Choose the right mode**: Use Framework mode for new projects, Data mode if you need control over bundling, Declarative mode for simple routing
66- **Use Route Module API** in Framework mode for automatic code splitting and type safety
67- **Return promises from loaders** for streaming with Suspense
68- **Use fetchers** for non-navigating form submissions and concurrent data loading
69- **Export ErrorBoundary** in route modules to catch errors gracefully
70- **Use middleware** for cross-cutting concerns like authentication and logging
71- **Leverage type safety** in Framework mode with generated Route types
72- **Prefer declarative navigation** (Link, NavLink, Form) over imperative (useNavigate)
73
74<!--
75Source references:
76- https://reactrouter.com/
77- https://github.com/remix-run/react-router
78-->
hairyf