React Router 入门

这一课你将能做到

1. 说明「路由」就是 URL 与界面的对应关系
2. 分清站内 Link 与普通 <a> 整页刷新的差异（SPA 场景）
3. 知道本站实际用的是 Next.js App Router，概念可迁移

为什么要学

多页应用需要地址栏变化：/tracks/react-essentials、/login。
刷新、收藏、发给同学，靠的都是 URL，不是「目前 React state 显示第几屏」。

在纯 React SPA 里常用 React Router；在本站则是 Next.js 文件路由。
概念相同：URL 变 → 显示不同页面组件。人话：网址是可分享的「现在在哪一站」。

只靠 useState 切「看起来像页面」的块：一刷新全没了，也无法收藏某课。

先建立图像

/learn        → Learn 页面组件
/tracks/java  → 课程详情（slug=java）
Link 点击     → 尽量客户端切换（不整页白屏重载）
外链 <a>      → 离开本站或新开标签

动态段 :slug / [slug] 表示这一截是变量。

跟着做

步骤 1：React Router 概念代码（了解，面试常见）

import { Link, Routes, Route } from "react-router-dom";

function Home() {
  return <h1>首页</h1>;
}
function About() {
  return <h1>关于</h1>;
}
function Track() {
  return <h1>某门课</h1>;
}

export function App() {
  return (
    <div>
      <nav>
        <Link to="/">首页</Link>
        <Link to="/about">关于</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/tracks/:slug" element={<Track />} />
      </Routes>
    </div>
  );
}

Link 改地址并渲染匹配的 Route，通常不整页卸掉 JS 状态（除非你故意刷新）。

步骤 2：对照本站 Next（你真正要摸的）

• 文件 app/tracks/[slug]/page.tsx ≈ 动态路由
• <Link href="/tracks/java"> ≈ 站内导航（注意是 href 不是 to）

打开 platform/src/app，把文件夹结构和浏览器地址栏对照一遍：文件夹即路径。这比背 Router API 更贴本站。

步骤 3：动态参数变化要当新数据

从 /tracks/html-css-essentials 点到 /tracks/react-essentials，组件可能复用同一文件。
slug 变了必须重新取数（Effect 依赖 slug，或 Next 的页面数据 API）。忘了就会显示上一门课的标题。

步骤 4：404 与外链

没有匹配时给兜底页，别白屏。
站外文档用 <a href="https://react.dev">；站内用框架 Link。

步骤 5：动态参数

// 路由：/tracks/:slug
const { slug } = useParams();

改 URL 中的 slug，组件应读到新参数（注意旧版/新版 API 差异，以你锁的 react-router 版本文档为准）。

讲清楚要点

1. URL 是可分享的：刷新后还应落在合理页面。
2. 动态参数变化时，要重新取数（依赖 slug）。
3. 404：没有匹配路由时的兜底。
4. 查询串 ?role=frontend 也是 URL 的一部分，本站走法偏好会用到。
5. 做本站 → Next 文件路由优先；别的仓库可能见到 React Router。思想通用：匹配、参数、链接。

你可能会懵的地方

• 我到底学 Router 还是 Next？
  贡献本站 → Next。面试被问 SPA 路由 → 能讲 Link / 动态段 / 刷新可恢复即可。

• 为何不要乱用 <a href="/learn">？
  站内用框架 Link，可保留客户端过渡、少整页重载；外链再用 <a>。

• 布局路由是什么？
  导航条不变、中间 {children} 换。Next 的 layout.tsx 就是这个。

• hash 路由 #/about？
  老 SPA 技巧。本站用真实路径，配合后端/托管配置。

• Link 与 a？
  站内 Link 保客户端过渡；外链用 a。

错法对照

错法	问题	正解
只靠 state 切「页面」无 URL	不能收藏/刷新丢失	路由
动态段变了不重新请求	显示旧课	依赖 slug 拉数
站内一律 <a>	整页重载、丢客户端状态	框架 Link
忽略 404	用户懵	兜底页
用 window.location 乱跳	丢 SPA 优势	navigate / Link
动态段不校验	脏 slug	校验或 Navigate 走 404

自测三问

1. 路由用一句话解释？为何不能只用 state？
2. Link 相对 a 的常见好处？本站 Next 的 Link 属性名是什么？
3. 本站动态课程页对应怎样的文件路径直觉？slug 变了要注意什么？

小结一句话

路由把网址映射到页面；站内用 Link，动态参数变化要当作新数据源。

练习：在地址栏手动改 slug 再回车，看课程页是否换成新课。若标题还是上一门，就是「动态段变了却没重新取数」——回到 Effect 课补依赖。

动手加深

列本站两个 URL，写出对应路由 path 与页面组件名（查 platform 亦可）。

跟着做（加厚 · react-router）

步骤：最小可运行对照

在 Vite 或 Next 练习页粘贴本课核心示例，改一个输入，确认屏幕变化符合预期。再故意写一个错法表里的写法，看控制台/界面如何坏，然后改回。

每个概念都问：state 在谁手里？UI 哪一块会因它重绘？

操作顺序：打开对应文件 → 改一处可观察点（文案、类型、className 或分支）→ 保存看结果 → 复原或留下有意义的小改动。

步骤：错法故意练一次

先按「用 jQuery 式直接改 DOM 冒充完成」做 30 秒（或在注释里写出若这样做会怎样），再改成「改数据（state/props）让 UI 推导出来」。 目的不是留坑，而是让失败现象进长期记忆。

你可能会懵的地方（加厚）

• 热更新后状态丢了？
  正常：整树重挂会重置 state。用 key 或外提状态保留；开发期别被吓到。

• 和文档示例不一致？
  以你锁的 React 大版本 + react.dev 为准；旧博客的 class 组件示例仅作历史阅读。

• 这课和前后课怎么接？
  回看大纲上一课的小结一句、下一课标题；用自己的话写「本课产出什么可观察结果」。写不出来就重做跟着做。

错法对照（加厚）

错法	问题	正解
用 jQuery 式直接改 DOM 冒充完成	假完成/埋雷	改数据（state/props）让 UI 推导出来
只看不敲	第二天全忘	至少跑通本课步骤
跳过自测三问	以为会了	闭卷答再对稿

场景打卡

用三行写今日打卡（可留在笔记）：① 我实际打开的文件；② 我改动/验证的现象；③ 仍模糊的一个词（下节课带着它问）。

若三行都写「无」——说明还在旁观。主路径课要求有可观察结果，不是只扫标题。

延伸

• Next.js Routing · React Router 文档
• 下一课：数据获取与错误边界。