react-router

React Router

The skill is based on React Router v7.13.0, generated at 2026-01-31.

React 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).

Core References

Topic	Description	Reference
Modes	Three usage modes: Framework, Data, and Declarative - choosing the right approach	core-modes
Routing	Route configuration, path patterns, nested routes, layout routes, and route matching	core-routing
Navigation	Navigation components and hooks: Link, NavLink, Form, useNavigate, redirect	core-navigation
Data Loading	Loading data with loaders and clientLoaders in route modules	core-data-loading
Actions	Data mutations with actions and clientActions in route modules	core-actions
Route Module	Route module API: component, loader, action, error boundary, headers, meta, and more	core-route-module
Hooks	Essential React Router hooks: useNavigation, useLocation, useParams, useMatches, and more	core-hooks

Features

Data Management

Topic	Description	Reference
Fetchers	Using fetchers for concurrent data interactions without navigation	features-fetchers
Error Handling	Error boundaries, error handling, and error responses	features-error-handling
Middleware	Middleware for authentication, logging, and request processing	features-middleware

Forms and User Input

Topic	Description	Reference
Form Validation	Form validation patterns, error handling, and user feedback	features-form-validation
File Uploads	Handling file uploads with multipart form data and file storage	features-file-uploads
Search Params	Working with URL search parameters using useSearchParams hook	features-search-params

Navigation and UX

Topic	Description	Reference
View Transitions	Smooth page transitions using View Transitions API	features-view-transitions
Navigation Blocking	Blocking navigation with useBlocker for unsaved form data	features-navigation-blocking

Best Practices

Topic	Description	Reference
Type Safety	Type safety with Route types, automatic type inference, and type generation	best-practices-type-safety

Advanced

Topic	Description	Reference
Streaming	Streaming with Suspense, deferring non-critical data, and React Suspense integration	advanced-streaming
Pre-rendering	Pre-rendering static pages at build time for faster page loads	advanced-pre-rendering
SPA Mode	Single Page App mode with SSR disabled and client-side routing	advanced-spa-mode

Key Recommendations

• Choose the right mode: Use Framework mode for new projects, Data mode if you need control over bundling, Declarative mode for simple routing
• Use Route Module API in Framework mode for automatic code splitting and type safety
• Return promises from loaders for streaming with Suspense
• Use fetchers for non-navigating form submissions and concurrent data loading
• Export ErrorBoundary in route modules to catch errors gracefully
• Use middleware for cross-cutting concerns like authentication and logging
• Leverage type safety in Framework mode with generated Route types
• Prefer declarative navigation (Link, NavLink, Form) over imperative (useNavigate)