第三章支线七 ·路由边境 · 多页世界的穿梭之术

剧情设定

幻域之外，是一片破碎但无限延展的“路由边境”。林昊穿行其间，发现每一座界面之门都由“路径符文”所控制。他必须掌握「穿梭之术」，才能真正构建起完整的多页应用宇宙。

---

路由的本质与单页幻术

林昊面前是一道“单页之门”，门上铭文写着：

“你所见为一，其实为多。”

这正是 单页应用（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’);

---

实战试炼 · 创建路由世界

1. 创建两个页面组件 Home 与 About，通过 Link 连接
2. 创建 /user/:id 路由，展示动态内容
3. 设置默认重定向路径
4. 构建一个包含嵌套路由的“控制台”页面

---

本章回顾

概念	内容
SPA	单页应用，前端控制页面切换
React Router	路由系统的核心工具
动态路由	根据路径参数渲染不同页面
嵌套路由	组件结构映射到页面结构
导航方式	Link、useNavigate、Navigate 等

---

林昊收获

称号：边境巡游者（Route Walker）
解锁技能：

• 构建前端多页系统
• 管理路径映射组件的逻辑关系
• 进行动态渲染与嵌套页面布局