react-router-declarative-mode

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

React Router Declarative Mode

React Router 声明式模式

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.

声明式模式是React Router中最简单的模式，使用

<BrowserRouter>

、

<Routes>

和

<Route>

实现基础的客户端路由，无需loader或action等数据加载功能。

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

使用
```
<BrowserRouter>
```
进行路由管理
使用
```
<Routes>
```
和
```
<Route>
```
配置路由
使用
```
<Link>
```
、
```
<NavLink>
```
或
```
useNavigate
```
进行导航
使用
```
useParams
```
读取URL参数
使用
```
useSearchParams
```
处理搜索参数
使用
```
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

加载相关参考资料以获取特定API/概念的详细指导：

参考资料	适用场景
`references/routing.md`	配置路由、嵌套路由、动态参数
`references/navigation.md`	链接、NavLink激活状态、编程式导航
`references/url-values.md`	读取参数、搜索参数、位置信息

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

使用

<Routes>

和

<Route>

通过JSX配置路由：

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

NavLink 激活状态

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

使用

NavLink

实现带有激活样式的导航：

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

读取URL参数

Use

useParams

to read dynamic route segments:

tsx

import { useParams } from "react-router";

function User() {
  const { userId } = useParams();
  return <h1>User {userId}</h1>;
}

使用

useParams

读取动态路由片段：

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

使用

useSearchParams

处理查询字符串值：

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>搜索结果：{query}</p>
    </div>
  );
}