第三章支线七 ·路由边境 · 多页世界的穿梭之术
🗺 剧情设定
幻域之外，是一片破碎但无限延展的“路由边境”。林昊穿行其间，发现每一座界面之门都由“路径符文”所控制。他必须掌握「穿梭之术」，才能真正构建起完整的多页应用宇宙。
🚪 路由的本质与单页幻术
林昊面前是一道“单页之门”，门上铭文写着：
“你所见为一，其实为多。”
这正是 单页应用（SPA） 的奥秘：
• 页面并非真正跳转，而是拦截路径变化，局部渲染组件。
基本原理：
用户点击链接 → 阻止默认跳转
→ 修改地址栏（history.pushState）
→ 路由系统决定显示哪个组件
🧭 React Router 入门
林昊获得了传说中的「React Router 灵石」，激活基本穿梭能力。
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';function App() {return (<BrowserRouter><nav><Link to="/">首页</Link><Link to="/about">关于</Link></nav><Routes><Route path="/" element={<Home />} /><Route path="/about" element={<About />} /></Routes></BrowserRouter>);
}
🌀 动态路由与嵌套路由
林昊踏入一片变幻莫测的“动态路径领域”。路径本身携带变量与状态。
示例：动态用户页面
<Route path="/user/:id" element={<User />} />function User() {const { id } = useParams();return <div>当前用户：{id}</div>;
}
嵌套路由
<Route path="/dashboard" element={<Dashboard />}><Route path="stats" element={<Stats />} /><Route path="settings" element={<Settings />} />
</Route>
🔍 链接、导航与重定向
林昊学会：
- Link 替代 标签，避免刷新
useNavigate() 实现编程式导航- 进行重定向
const navigate = useNavigate();
navigate(‘/home’);
🧪 实战试炼 · 创建路由世界
- 创建两个页面组件 Home 与 About，通过 Link 连接
- 创建 /user/:id 路由，展示动态内容
- 设置默认重定向路径
- 构建一个包含嵌套路由的“控制台”页面
📚 本章回顾
| 概念 | 内容 |
|---|---|
| SPA | 单页应用，前端控制页面切换 |
| React Router | 路由系统的核心工具 |
| 动态路由 | 根据路径参数渲染不同页面 |
| 嵌套路由 | 组件结构映射到页面结构 |
| 导航方式 | Link、useNavigate、Navigate 等 |
🎖 林昊收获
称号：边境巡游者（Route Walker）
解锁技能：
- 构建前端多页系统
- 管理路径映射组件的逻辑关系
- 进行动态渲染与嵌套页面布局