@hairyf/react-router
Hairy's curated collection of agent skills.
No skills found in this collection.
SKILL.md
| name | react-router |
| description | 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. |
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)
<!--
Source references:
- https://reactrouter.com/
- https://github.com/remix-run/react-router
-->
Loading...
Select a file to preview
Analyzing security...
Checking scan reports and verification data.
Bill of Materials
Everything this skill can do — files, network, commands, and more.
No demos yet. To add one, ask your AI agent: "Submit a demo for @hairyf/react-router" — or upload via the API.
To add a demo, ask your AI agent: "Submit a demo for @hairyf/react-router"
No eval data yet. Eval results are published via the SkillSafe API.