React 路由：React Router
前置：React 常用 Hooks
目标：用react-router-dom做多页面与动态参数。
引言
单页应用没有「真刷新换页」，靠URL 变化 ↔ 换一块组件。react-router-dom负责这件事：声明路径、跳转、读动态参数。
本篇 demo：/、/about、/users/:id三页 + 顶栏导航。
动手
完整代码：react2/06-router/demo
cdreact2/06-router/demonpminstall&&npmrun 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里：
- 顶栏三个
Link→ 切换路由 - 三个页面组件：
Home/About/User User用useParams()显示当前id
自己改一改：加/contact，或把 User 链接改成列表map出多个 id。
运行截图
下一篇
React 数据请求：TanStack Query
