React 路由：React Router

React 路由：React Router

前置：React 常用 Hooks
目标：用 react-router-dom 做多页面与动态参数。

引言

单页应用没有「真刷新换页」，靠 URL 变化 ↔ 换一块组件。
react-router-dom 负责这件事：声明路径、跳转、读动态参数。

本篇 demo：/、/about、/users/:id 三页 + 顶栏导航。

动手

完整代码：react2/06-router/demo

cd react2/06-router/demo
npm install && npm run dev

依赖已含 react-router-dom。点顶栏 Home / About / User/7，看地址栏和内容区一起变。

---

1. 最小结构：BrowserRouter + Routes

import { BrowserRouter, Link, Route, Routes, useParams } from 'react-router-dom'

export default function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/users/7">User/7</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/users/:id" element={<User />} />
      </Routes>
    </BrowserRouter>
  )
}

角色	干什么
BrowserRouter	用浏览器 History API 管 URL（最常见）
Routes	根据当前路径选出要渲染的 Route
Route	path + element：匹配到就渲染该组件
Link	客户端跳转，不会整页刷新

BrowserRouter 一般包在应用最外层（本 demo 包在 App 里）。

---

2. 用 Link 导航，别用 <a>

<Link to="/about">关于</Link>
<Link to="/users/42">用户 42</Link>

• <Link to="...">：只改前端路由，状态还在。
• 普通 <a href="...">：整页重载，SPA 体验关掉。
• 程序里跳转用 useNavigate()（本 demo 未演示，嵌套路由篇会用到）。

---

3. 动态参数：/users/:id + useParams

路由声明：

<Route path="/users/:id" element={<User />} />

组件里读：

function User() {
  const { id } = useParams()
  return (
    <section>
      <h2>用户详情</h2>
      <p>
        动态参数 <code>id</code> = {id}
      </p>
      <Link to="/">回首页</Link>
    </section>
  )
}

打开 /users/7 或 /users/42，id 分别是 "7" / "42"（字符串）。要当数字用先 Number(id)，并做好非法值兜底。

---

4. 路径怎么匹配（直觉）

path	能匹配	说明
/	仅首页	精确匹配这个路径
/about	/about	静态段
/users/:id	/users/任意一段	:id 是参数名

注意：更具体的路由要写清楚；以后做「嵌套布局」时会用到 <Outlet />（见后续篇）。

---

对照表

API	用途	demo
BrowserRouter	启用浏览器路由	包住整页
Routes / Route	声明路径 ↔ 组件	/、/about、/users/:id
Link	声明式跳转	顶栏 + 页内链接
useParams	读动态段	User 里的 id

---

常见坑

做法	问题
用 <a href> 做站内跳转	整页刷新，白开 SPA
忘了包 BrowserRouter	Link / useParams 直接报错
把 useParams 用在 Routes 外、且不在匹配的路由树里	拿不到参数或不符合预期
动态 id 当 number 直接算	实际是 string，先转换

---

demo 在练什么

App.tsx 里：

1. 顶栏三个 Link → 切换路由
2. 三个页面组件：Home / About / User
3. User 用 useParams() 显示当前 id

自己改一改：加 /contact，或把 User 链接改成列表 map 出多个 id。

---

运行截图

下一篇

React 数据请求：TanStack Query