React Router Declarative Mode

remix-run/agent-skills/skills/react-router-declarative-mode

作者 remix-run33578aae4aa3MIT135 个星标收录于 2026年10月8日更新于 2026年10月8日仓库3个月前更新

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.

已归档仅含说明Software Development

AI 生成的概览

指导使用 React Router 声明式模式：BrowserRouter 路由、Link/NavLink 导航及 URL 参数。

功能: 该技能为使用 React Router 声明式模式构建 React 应用提供指导，通过 BrowserRouter、Routes 和 Route 实现客户端路由，不涉及 loader 或 action 等数据加载功能。内容涵盖用 JSX 配置路由、使用 Link、NavLink 和 useNavigate 进行导航，以及读取 URL 参数、搜索参数和 location。技能附带三份参考文档，分别介绍路由、导航和 URL 取值，并指向 React Router 官方文档以补充未覆盖的内容。
适用场景: 适用于使用 Routes 和 Route 配置路由、使用 Link、NavLink 或 useNavigate 导航，或在 React Router 应用中读取参数、搜索参数和 location 的场景。它面向不使用数据 loader 或 action 的声明式模式配置。
运行要求: 不含脚本，仅为说明与参考文档。所述模式假定 React 项目已安装 react-router 包。

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

来源与署名

来源：remix-run/agent-skills位于skills/react-router-declarative-mode提交33578aa

许可证： MIT

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

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

来源与署名

更多来自 remix-run/agent-skills 的技能

React Router Data Mode

更多Software Development技能

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices