Agent skill

react-router-declarative-mode

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.

View SKILL.md on GitHub Repository
Stars 107
Forks 3

Install this agent skill to your Project

npx add-skill https://github.com/remix-run/agent-skills/tree/main/skills/react-router-declarative-mode

SKILL.md

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>
  );
}

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>
  );
}

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>;
}

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>
  );
}

Further Documentation

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

https://reactrouter.com/docs

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

remix-run/agent-skills

react-router-data-mode

Build React applications using React Router's data mode with createBrowserRouter and RouterProvider. Use when working with route objects, loaders, actions, Form, useFetcher, or pending/optimistic UI without the Vite plugin.

107 3
Explore
remix-run/agent-skills

react-router-framework-mode

Build full-stack React applications using React Router's framework mode. Use when configuring routes, working with loaders and actions, handling forms, handling navigation, pending/optimistic UI, error boundaries, or working with react-router.config.ts or other react router conventions.

107 3
Explore
mattpocock/skills

setup-pre-commit

Set up Husky pre-commit hooks with lint-staged (Prettier), type checking, and tests in the current repo. Use when user wants to add pre-commit hooks, set up Husky, configure lint-staged, or add commit-time formatting/typechecking/testing.

111,310 9,758
Explore
mattpocock/skills

scaffold-exercises

Create exercise directory structures with sections, problems, solutions, and explainers that pass linting. Use when user wants to scaffold exercises, create exercise stubs, or set up a new course section.

111,310 9,758
Explore
mattpocock/skills

edit-article

Edit and improve articles by restructuring sections, improving clarity, and tightening prose. Use when user wants to edit, revise, or improve an article draft.

111,310 9,758
Explore
mattpocock/skills

handoff

Compact the current conversation into a handoff document for another agent to pick up.

111,310 9,758
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results