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