React Router 是怎么做页面切换的？

🎙 欢迎来到《前端达人 · React播客书单》第 20 期，视频版更精彩。

🗺 视频版

今天我们来聊聊前端开发中最常见但又经常“写错”的东西：React Router 的路由声明与导航。

这节课，我们不讲历史版本，不讲边边角角，帮你彻底搞懂：

React Router 到底怎么做“页面跳转”的？

🗺 什么是客户端路由？

👉 在传统多页面应用中，点击链接 = 整个页面重新加载。 👉 而在 SPA（Single-Page Application）中，页面不会真正“跳转”，而是URL 变化 → 显示对应视图。

React Router 就是帮我们实现这个效果的工具。

📌 简单理解：

React Router = 模拟浏览器导航的前端“大脑”。

🧠 核心概念：Router 与路由声明

React Router 推荐使用 createBrowserRouter 来创建一个路由配置👇

const router = createBrowserRouter([
  { path: '/', element: <Home /> },
  { path: '/about', element: <About /> },
]);

然后通过 <RouterProvider router={router} /> 包裹你的应用。

这相当于告诉 React：

以后 URL 变化时，应该展示哪个组件。

✅ path 是路径 ✅ element 是你要渲染的 React 元素 ✅ RouterProvider 是“入口”，让你的应用具备感知 URL 的能力

🧭 页面跳转用什么？！

在 React Router 中，页面跳转不能用传统的 <a> 标签。否则会刷新整页。

应该使用：

<Link to="/about">关于我们</Link>

📌 它的作用：

• 阻止默认跳转行为
• 仅更新浏览器 URL
• 触发 Router 渲染目标页面组件

✅ 更快 ✅ 更平滑 ✅ 不重新加载页面

✨ 高亮当前菜单：

用<NavLink> 是 <Link> 的“升级版”：

<NavLink
  to="/about"
  className={({ isActive }) => (isActive ? 'active' : '')}
/>

你可以根据 isActive 自动加 class，来实现“当前页面高亮”功能👇

.active {
  font-weight: bold;
  color: blue;
}

💡 适合放在导航栏，比如顶部菜单。

🔍 Link vs NavLink 对比表

✅ 总结建议：

• 主导航栏 → 用 <NavLink>
• 普通跳转 → 用 <Link>

🧩 React Router 的完整架构流程

一句话概括：从点击 <Link> 到组件渲染，中间发生了这些事：

用户点击 Link
→ URL 变化（History API）
→ Router 监听到变化
→ 匹配 path，渲染对应 element
→ RouterProvider 将组件渲染出来

是不是很像一个小型的“路由中台”？这就是 SPA 应用的魔力。

⚠️ 常见踩坑小贴士

• to 写错路径 → 无法导航
• 忘记使用 <RouterProvider> → 整个系统无法感知 URL
• 使用 <a> 导致整页刷新
• 没有设置默认路由 → 报错页面一片空白

🎯 建议：每次添加路由前，先想清楚结构和路径，再声明！

🧪 推荐实战练习

用 createBrowserRouter + <NavLink> 搭一个“迷你导航系统”，包含以下页面：

• 首页 /
• 关于我们 /about
• 联系方式 /contact

切换时 URL 变化 + 高亮菜单，体验一次真实路由系统的搭建。

📦 下一期我们将带你深入「嵌套路由」与「动态路由」的使用细节，敬请期待！

#React #React播客 #前端播客 #前端达人 #TypeScript