🎙 欢迎来到《前端达人 · React播客书单》第 19 期。
视频版
今天我们要聊的是前端开发绕不开的一个核心知识点：React Router。
你是否遇到过以下问题👇
想做“点击跳转页面”，结果整个页面都刷新了？
不刷新页面就能切换组件，听说需要 Router？
看了文档，
createBrowserRouter、RouterProvider一脸懵？
这一期我们就来 手把手拆解 React Router 的核心概念和配置流程。
🚪 什么是 React Router？
👉 它是 React 官方推荐的路由解决方案。
简单说，它让你能根据 URL 动态渲染对应的组件内容，构建真正的“单页应用”（SPA）。
✨ 举个例子：
/about → <AboutPage />
/home → <HomePage />
/user/1 → <UserProfile id="1" />这些“页面”的切换，都是 React 自己做的，不刷新页面，不请求新 HTML。
❓ 为什么我们需要它？
传统网页跳转，是浏览器自己处理的。每次跳页面，都发一个请求加载新的 HTML。
但 SPA（单页应用）只有一个 index.html，后续所有页面内容都是 JavaScript 动态切换的。
所以我们就需要：
✅ 一个机制来管理当前 URL ✅ 一个机制来告诉 React 应该渲染哪个组件 ✅ 一个方式来让用户“跳转页面”而不是“刷新页面”
这就是 React Router 登场的理由！
🔧 安装和准备工作
想用 React Router，你需要准备这些：
工具 |
说明 |
|---|---|
Node.js + npm |
用于安装依赖 |
React 项目 |
推荐使用 Create React App（最新版本不建议使用） |
TypeScript |
非必须但强烈推荐 |
Tailwind CSS |
用于美化页面（可选） |
安装命令如下 👇
npm install react-router-dom📌 注意：react-router-dom 包含了所有用于 Web 开发的组件和 Hook，也已经内置了 TS 类型定义！
🧭 创建路由器：createBrowserRouter
创建路由器，我们用这个函数：
import { createBrowserRouter } from "react-router-dom";
const router = createBrowserRouter([
{
path: "/",
element: <HomePage />
},
{
path: "/about",
element: <AboutPage />
}
]);每一项表示一个“路径”和对应的“页面组件”。
🧠 path 是路径，element 是对应要渲染的组件。
🧰 注入 Router 到应用中：RouterProvider
你创建好的 router 还不能直接用，它需要“挂载”到你的 React 应用中。
我们用 RouterProvider 完成这件事：
import { RouterProvider } from "react-router-dom";
<RouterProvider router={router} />📍 通常放在 index.tsx 文件的根组件中，包裹整个 App。
就像 React 的 Context 一样，RouterProvider 会为整个组件树提供“路由上下文”。
❌ 没有匹配的页面怎么办？——错误页面处理
用户访问了 /random-url 这种不存在的路径，该怎么办？
默认 React Router 会报错，或者显示一个空白页。
我们可以用 errorElement 属性自定义错误页面👇
{
path: "/",
element: <HomePage />,
errorElement: <ErrorPage />
}这样访问错误路径时，会显示你设计好的 <ErrorPage />。
✨ Bonus：可以用 useRouteError() Hook 获取具体错误信息！
📌 路由核心流程总结
来复习一下完整流程 🧩：
1️⃣ 安装 react-router-dom 2️⃣ 使用 createBrowserRouter 创建路由表 3️⃣ 每个路由项包含 path + element4️⃣ 用 RouterProvider 注入 router 到 React 应用中 5️⃣ 设置 errorElement 处理 404 或异常路径
✅ 什么场景下一定要学 React Router？
✔ 你在开发一个内容页比较多的项目（博客、后台管理系统） ✔ 你希望在 URL 中保留用户的访问状态 ✔ 你希望实现嵌套路由（下一期我们会讲） ✔ 你想要做更细粒度的组件切换控制（如分页、搜索参数）
🧪 推荐实战练习
做一个迷你博客网站：
/→ 首页/post/:id→ 查看某篇文章/about→ 关于页
用 React Router 配置这些路径，让你真正掌握这个“前端导航利器”。
📦 下一期我们将讲解“嵌套路由与动态参数”，欢迎继续收听《前端达人 · React播客书单》！
#React #React播客 #前端播客 #前端达人 #TypeScript