skills.rest
aashahin
aashahinCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

react-router-declarative-mode

Configure client-side routing in React using React Router's declarative BrowserRouter mode.

Updated Jun 22, 2026
Search Tags:#react#routing#navigation#client-side#react-router#nested routes#useparams
One-click install
npx skills add https://github.com/aashahin/ai-skills --skill react-router-declarative-mode-aashahin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-router-declarative-mode
Source: https://github.com/aashahin/ai-skills/tree/main/react-router-declarative-mode
Command: npx skills add https://github.com/aashahin/ai-skills --skill react-router-declarative-mode-aashahin

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react-router, and includes references (resource) components.

What problem does it solve? Setting up client-side routing in React applications requires correctly configuring routes, navigation links, and URL parameter handling, and mistakes like full page reloads from anchor tags or broken active states are common. ## Core Features & Use Cases - JSX Route Configuration: Set up routes with BrowserRouter, Routes, and Route, including nested routes, layout routes, index routes, dynamic segments, optional segments, and 404 catch-alls. - Navigation Patterns: Use Link, NavLink with active-state styling, and useNavigate for programmatic navigation after form submissions or redirects. - URL Value Handling: Read route params with useParams, manage query strings with useSearchParams, and access location state with useLocation. - Use Case: Build a dashboard app where /dashboard/settings renders inside a shared layout with an Outlet, the nav highlights the active link, and a search page syncs its input to the ?q= query parameter. ## Quick Start Ask the AI to set up React Router declarative routing with nested routes and a NavLink menu for your React app.

Frequently Asked Questions about react-router-declarative-mode

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up nested routes in React Router?▼

Nest child Route components inside a parent Route and render an Outlet in the parent component where children should appear. The parent route's element acts as a shared layout, and an index route renders at the parent's exact path.

How do I read URL params and search params in React Router?▼

Use useParams to read dynamic route segments like :userId, and useSearchParams to read and update the query string. Params are always string or undefined, so validate them before parsing to numbers.

What is the difference between Link, NavLink, and useNavigate?▼

Link handles standard navigation, NavLink adds active-state styling for menus, and useNavigate performs programmatic navigation after async operations like form submissions. Prefer Link or NavLink for user-initiated clicks for better accessibility.

Why is my NavLink active on every page?▼

Without the end prop, NavLink matches any URL that starts with its to path, so a link to / stays active everywhere. Add the end prop to require an exact path match.

When should I not use React Router declarative mode?▼

Declarative mode does not include data loading features like loaders or actions. If your routes need server data fetching tied to navigation, use React Router's data mode with a router created via createBrowserRouter instead.

Related Skills

Explore More Software Engineering Skills→
guillempucheguillempuche

react-router

Configure TanStack Router with Vite for type-safe React routing.

Community
Advanced
wonkpentinkwonkpentink

layout-wrapper-components

Create React layout wrappers with auth guards and Outlet-based nested routes.

Community
Intermediate
podversepodverse
6

add-by-rss-parity-sync

Synchronize add-by-RSS UI views with non-add-by-RSS counterparts for visual parity.

Official
Intermediate
yyong008yyong008

react-router-data-mode

Build React apps with React Router data mode using loaders and actions.

Community
Intermediate