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.

remix-run/agent-skills|Updated Apr 8, 2026

Works with

Claude CodeCursorClineWindsurfCodex

Installation Guide

Select your AI agent

How to use react-router-declarative-mode on Cursor

AI-first code editor with Composer

Prerequisites

Before installing skills in Cursor, ensure your development environment meets these requirements:

›Cursor installed and configured on your machine
›Node.js 16+ with npm — verify with node --version
›Active project directory where you want to add react-router-declarative-mode

Run the install command

Execute the skills CLI command in your project's root directory to begin installation:

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

Fetches react-router-declarative-mode from remix-run/agent-skills and configures it for Cursor.

Select Cursor when prompted

The CLI shows a list of agents. Use arrow keys and space to select Cursor:

◆ Which agents do you want to install to?

│

│ ── Universal (.agents/skills) ────────────────

│ · Cline · Codex · Goose · Windsurf

│ ●Cursor(selected)

│ · Cursor · Aider · Continue

Verify installation

Confirm successful installation by checking the skill directory location:

.cursor/skills/react-router-declarative-mode

Restart Cursor to activate react-router-declarative-mode. Access via /react-router-declarative-mode in your agent's command palette.

⚠

Security Notice

We perform automated surface-level scans (Gen AI Scanner, Socket, Snyk) during installation. These checks detect common vulnerabilities but do not guarantee complete security. Always review skill source code and verify the publisher's reputation before production use.

Skills execute code in your environment. Always review source, verify the publisher, and test in isolation before production.

›View source on GitHub ›Skills CLI docs ›About Cursor ›What are agent skills?

Documentation

List & Monetize Your Skill

Submit your Claude Code skill and start earning

Get started →

Use Cases

Task Automation & Efficiency

Automate repetitive workflows and reduce manual effort

Example

Generate reports, summarize documents, draft communications

✓

Save 3-5 hours per week on routine tasks

Knowledge Enhancement

Learn new skills, understand complex topics, get expert guidance

Example

Explain concepts, provide examples, suggest learning resources

✓

Accelerate learning and skill development by 2x

Quality Improvement

Enhance output quality through reviews, suggestions, and refinements

Example

Review drafts, suggest improvements, catch errors

✓

Improve work quality by 30-40% with less effort

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>:

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:

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:

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:

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

react-router-declarative-mode

Installation Guide

How to use react-router-declarative-mode on Cursor

Prerequisites

Run the install command

Select Cursor when prompted

Verify installation

Security Notice

Documentation

List & Monetize Your Skill

Use Cases

Task Automation & Efficiency

Knowledge Enhancement

Quality Improvement

Install Skill

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

Implementation Guide

Best Practices

When to Use This

Learning Path

Related Skills

react-vite-best-practices

frontend-design

premium-frontend-ui

ui-animation

high-end-visual-design

antigravity-design-expert

Reviews

Discussion