React 播客专栏 Vol.19｜React Router 快速入门指南

🎙 欢迎来到《前端达人 · 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，你需要准备这些：

安装命令如下 👇

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