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