React Router Declarative Mode

This covers React Router's declarative mode, the JSX-based approach with BrowserRouter, Routes, and Route components. You'd reach for this when you want straightforward client-side routing without the data loading machinery that comes with RouterProvider and createBrowserRouter. The skill focuses on the core hooks like useParams, useSearchParams, and useNavigate, plus navigation with Link and NavLink for active states. It's a clean reference if you're building something that doesn't need loaders or actions and you just want to wire up routes the classic React way. The examples are practical and the three-reference structure keeps things organized without overwhelming you.

skills.sh installs: 698
GitHub stars: 134
last updated: Jul 14, 2026

View on GitHub

Install

$ npx -y skills add remix-run/agent-skills --skill react-router-declarative-mode --agent claude-code

Installs into .claude/skills of the current project.

Files

React Router Declarative Mode

Declarative mode is React Router's simplest mode using <BrowserRouter>, <Routes>, and <Route> for basic client-side routing without data loading features like loaders or actions.

When to Apply

Using <BrowserRouter> for routing
Configuring routes with <Routes> and <Route>
Navigating with <Link>, <NavLink>, or useNavigate
Reading URL params with useParams
Working with search params using useSearchParams
Accessing location with useLocation

References

Load the relevant reference for detailed guidance on the specific API/concept:

Reference	Use When
`references/routing.md`	Configuring routes, nested routes, dynamic params
`references/navigation.md`	Links, NavLink active states, programmatic nav
`references/url-values.md`	Reading params, search params, location