React Router Declarative Mode

by remix-run33578aae4aa3MIT135 starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 3 months ago

Build React applications using React Router's declarative mode with BrowserRouter. Use when configuring routes with JSX, navigating with Link/NavLink, or reading URL params and search params without data loaders or actions.

ArchivedInstructions onlySoftware Development

AI-generated overview

Guides React Router declarative mode: BrowserRouter routes, Link/NavLink navigation, and URL params.

What it does: This skill provides guidance for building React applications with React Router's declarative mode, using BrowserRouter, Routes, and Route for client-side routing without loaders or actions. It covers route configuration in JSX, navigation with Link, NavLink, and useNavigate, and reading URL params, search params, and location. It ships three reference documents on routing, navigation, and URL values, and points to the official React Router documentation for anything not covered.
When to use it: Use it when configuring routes with Routes and Route, navigating with Link, NavLink, or useNavigate, or reading params, search params, or location in a React Router app. It is meant for declarative-mode setups that do not use data loaders or actions.
Requirements: No scripts; instructions and reference documents only. The described patterns assume a React project with the react-router package installed.

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

Critical Patterns

These are the most important patterns to follow. Load the relevant reference for full details.

Basic Route Setup

Configure routes with JSX using <Routes> and <Route>:

tsx

import { BrowserRouter, Routes, Route } from "react-router";
function App() {  return (    <BrowserRouter>      <Routes>        <Route path="/" element={<Home />} />        <Route path="about" element={<About />} />        <Route path="dashboard" element={<Dashboard />}>          <Route index element={<DashboardHome />} />          <Route path="settings" element={<Settings />} />        </Route>        <Route path="users/:userId" element={<User />} />      </Routes>    </BrowserRouter>  );}

import { BrowserRouter, Routes, Route } from "react-router";
function App() {  return (    <BrowserRouter>      <Routes>        <Route path="/" element={<Home />} />        <Route path="about" element={<About />} />        <Route path="dashboard" element={<Dashboard />}>          <Route index element={<DashboardHome />} />          <Route path="settings" element={<Settings />} />        </Route>        <Route path="users/:userId" element={<User />} />      </Routes>    </BrowserRouter>  );}

NavLink Active States

Use NavLink for navigation with active styling:

tsx

import { NavLink } from "react-router";
function Nav() {  return (    <nav>      <NavLink        to="/"        end        className={({ isActive }) => (isActive ? "active" : "")}      >        Home      </NavLink>      <NavLink        to="/dashboard"        className={({ isActive }) => (isActive ? "active" : "")}      >        Dashboard      </NavLink>    </nav>  );}

import { NavLink } from "react-router";
function Nav() {  return (    <nav>      <NavLink        to="/"        end        className={({ isActive }) => (isActive ? "active" : "")}      >        Home      </NavLink>      <NavLink        to="/dashboard"        className={({ isActive }) => (isActive ? "active" : "")}      >        Dashboard      </NavLink>    </nav>  );}

Reading URL Params

Use useParams to read dynamic route segments:

tsx

import { useParams } from "react-router";
function User() {  const { userId } = useParams();  return <h1>User {userId}</h1>;}

import { useParams } from "react-router";
function User() {  const { userId } = useParams();  return <h1>User {userId}</h1>;}

Working with Search Params

Use useSearchParams for query string values:

tsx

import { useSearchParams } from "react-router";
function SearchResults() {  const [searchParams, setSearchParams] = useSearchParams();  const query = searchParams.get("q");
  return (    <div>      <input        value={query || ""}        onChange={(e) => setSearchParams({ q: e.target.value })}      />      <p>Results for: {query}</p>    </div>  );}

import { useSearchParams } from "react-router";
function SearchResults() {  const [searchParams, setSearchParams] = useSearchParams();  const query = searchParams.get("q");
  return (    <div>      <input        value={query || ""}        onChange={(e) => setSearchParams({ q: e.target.value })}      />      <p>Results for: {query}</p>    </div>  );}

Further Documentation

If anything related to React Router is not covered in these references, you can search the official documentation:

https://reactrouter.com/docs

Source and attribution

Source:remix-run/agent-skillsinskills/react-router-declarative-modeat commit33578aa

License: MIT

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

React Router Declarative Mode

React Router Declarative Mode

When to Apply

References

Critical Patterns

Basic Route Setup

NavLink Active States

Reading URL Params

Working with Search Params

Further Documentation

Source and attribution

More from remix-run/agent-skills

React Router Data Mode

More in Software Development

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices