React Router Declarative Mode
Independent PiSkill directory guide. The original skill remains hosted by React Router Agent Skills.
What is React Router Declarative Mode?
Guides declarative React Router applications using BrowserRouter, JSX route configuration, Link and NavLink navigation, and URL parameter handling without data-mode APIs.
What does React Router Declarative Mode do?
React Router Declarative Mode is a React Router Agent Skill for straightforward client-side routing with `BrowserRouter`, JSX routes and navigation hooks. It is intended for applications that need nested routes, links, route parameters and search parameters without router-managed loaders or actions.
Who is React Router Declarative Mode best for?
- React apps that only need client-side routing
- Projects using JSX `<Routes>` and `<Route>` configuration
- Teams working with URL params and search params
- Developers who do not need React Router data APIs
Common use cases
- Configure nested JSX routes
- Navigate with Link, NavLink or `useNavigate`
- Read dynamic parameters with `useParams`
- Manage query strings with `useSearchParams`
How does React Router Declarative Mode work?
The skill uses `BrowserRouter` around JSX route definitions and selects the relevant navigation or URL hooks for each task. It deliberately keeps the routing layer simple by excluding loaders and actions that belong to Data or Framework Mode.
Key benefits
- Simple mental model for client-side routing
- Covers route configuration and common navigation hooks
- Useful for smaller or existing React applications
- Avoids data-router complexity when it is not needed
Things to know
- The source repository is archived and read-only, so current React Router documentation should be checked for future changes
- Declarative Mode does not provide route loaders or actions
- Larger full-stack applications may benefit from Data or Framework Mode
Compatible tools
Frequently asked questions
What is React Router Declarative Mode?
When should I choose Data Mode instead?
Related skills
React Router Data Mode
Guides React Router data-mode applications using createBrowserRouter and RouterProvider, including route objects, loaders, actions, forms, pending UI, and optimistic updates.
React Router Framework Mode
Provides current patterns for full-stack React Router framework-mode applications, including routing, loaders, actions, forms, sessions, middleware, error handling, and rendering strategies.
React Best Practices
Applies Vercel Engineering's React and Next.js performance guidance when writing, reviewing, or refactoring components, data fetching, bundles, rendering, and server-side code.
New Terraform Provider
Scaffolds a new Terraform provider using the Terraform Plugin Framework, including Go module setup, provider server entrypoint, schema, configuration, build, and tests.
Next.js Partial Prefetching Adoption
Guides adoption of Next.js Partial Prefetching by auditing link behavior, enabling the feature, resolving surfaced issues, and deciding which routes merit deeper runtime prefetching.
Cloudflare Durable Objects
Designs stateful Cloudflare applications with Durable Objects, covering storage, consistency, alarms, WebSockets, migrations, concurrency, and production reliability patterns.