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。