深入掌握 React Router：从客户端路由原理到 react-router-dom 实战-育师

深入掌握 React Router：从客户端路由原理到 react-router-dom 实战

【免费下载链接】curriculumThe open curriculum for learning web development项目地址: https://gitcode.com/GitHub_Trending/cu/curriculum

本篇技术指南以 archive/javascript/react_js/router.md 为核心脉络，系统讲解客户端路由（Client-Side Routing）的概念、React Router 的工作原理，以及通过react-router-dom在 React 单页应用中搭建多页面导航的完整流程。读者学完后将能够独立创建基于路由的 React 项目、理解BrowserRouter、Routes、Route三大核心组件的职责，并具备进一步探索嵌套路由、动态路由与路由测试等进阶能力的知识基础。

为什么需要路由：从单页应用到多页面应用

在早期的 React 学习中，我们编写的都是一页式应用（one-page applications）——整个应用只有一个页面，组件切换完全靠内部状态驱动。但一旦应用拥有多个页面（例如首页、个人主页、购物车页面），就必须引入一套可靠的（reliable）路由系统来回答一个核心问题：当用户导航到某个 URL 时，应当渲染哪个组件或页面。

这个问题的标准解决方案是客户端路由（Client-side routing），即在前端（渲染到客户端的 JS 文件）内部完成路由的处理。它帮助我们在构建单页应用（SPA，Single-Page Application）时，用户在导航过程中无需刷新页面：例如用户点击导航栏元素时，URL 随之改变，页面视图在客户端内部被同步更新，而不是向服务器发起一次全新的页面请求。

React Router 是 React 应用的标准路由库。通过 React Router，我们可以根据路由（route）指定应该渲染哪个组件。从 v4 版本开始，React Router 采用了**动态路由（dynamic routes）**机制，即路由在应用渲染的过程中实时生效，这与早期将所有路由集中静态声明的方式有本质区别。

从零搭建：创建一个带路由的 React 项目

准备基础组件

首先，使用create-react-app创建一个新项目，并按照之前的课程清空样板代码（只保留index.js和App.js两个文件）。

接着在src目录下新建一个Profile.js文件，写入一个只包含h1元素的基础函数组件：

const Profile = () => { return ( <div> <h1>Hello from Profile</h1> </div> ); }; export default Profile;

同时确保App.js内容如下：

const App = () => { return ( <div> <h1>Hello from App</h1> </div> ); }; export default App;

安装 react-router-dom

打开终端，运行以下命令安装路由包：

npm i react-router-dom

该命令会连同其全部依赖一起安装到项目中。在安装进行的同时，我们可以新建一个名为RouteSwitch.js的文件——它将是负责处理应用路由的入口文件。

编写 RouteSwitch：声明你的第一条路由

安装完成后，将以下代码写入RouteSwitch.js：

import React from "react"; import { BrowserRouter, Routes, Route } from "react-router-dom"; import App from "./App"; import Profile from "./Profile"; const RouteSwitch = () => { return ( <BrowserRouter> <Routes> <Route path="/" element={<App />} /> <Route path="/profile" element={<Profile />} /> </Routes> </BrowserRouter> ); }; export default RouteSwitch;

这里首先导入了 React、两个组件（Profile和App），以及刚从包中安装的几个导出项，它们各自承担不同的职责：

Route（路由）：一条路由包含一个path（等于 URL 路径）以及一个element（当导航到该 URL 时应当渲染的组件）。例如path="/"对应首页App，path="/profile"对应Profile。
BrowserRouter（浏览器路由器）：一种路由器，它借助 History API（pushState、replaceState以及popstate事件）让 UI 与 URL 保持同步。需要说明的是，除了BrowserRouter还有其他选项（例如HashRouter），但在当前阶段的项目中，可以放心地把BrowserRouter作为所有项目的根组件。
Routes（路由集合）：渲染与当前 location 匹配的第一个Route子组件。换句话说，Routes会遍历所有Route并检查它们的path，第一个与 URL精确匹配的Route被渲染，其余全部被忽略。值得注意的是，在react-router-dom的早期版本中，实现这一精确匹配行为需要显式添加exact关键字。

从仓库中更新后的 react/the_react_ecosystem/react_router.md 可以看到，React Router 的较新版本（v6.4+）推荐使用基于对象的路由配置方式：通过createBrowserRouter传入路由数组、再用RouterProvider渲染配置，且匹配逻辑默认就是精确的，这正是上述声明式写法在 API 层面的演化方向。

让 RouteSwitch 成为应用入口

在浏览器中验证路由行为之前，还需要修改index.js。原因在于：我们不希望App.js成为应用启动时第一个被调用的文件，而是希望RouteSwitch.js成为入口。修改后的index.js大致如下：

import React from "react"; import ReactDOM from "react-dom/client"; import RouteSwitch from "./RouteSwitch"; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <RouteSwitch /> </React.StrictMode> );

运行并验证两条路由

完成后运行：

npm start

然后在浏览器地址栏中手动修改 URL，分别访问首页路由/与个人主页路由/profile，即可看到两个不同组件分别被渲染。整个过程无需页面刷新——这就是客户端路由在真实项目中最直观的体现。

三个核心组件的协作原理

理解RouteSwitch.js中的组合方式是掌握 React Router 的关键：

URL 是唯一事实来源：BrowserRouter监听地址栏变化，任何对 URL 的修改（无论是用户输入还是代码触发）都会通过 History API 被捕获，进而驱动 UI 更新。
匹配是"先到先得"：Routes采用第一个匹配优先的策略，按声明顺序从上到下检查每个Route的path与当前 location 是否精确一致。
组件是路由的结果：每条Route的element属性决定了匹配成功后渲染什么，这让"URL → 组件"的映射关系清晰、可预测。

从基础到进阶：仓库中的延伸知识

本节内容在原文档的基础上，结合本仓库 react/the_react_ecosystem/react_router.md 等课程的实现细节，补充几个在真实项目中高频使用的路由能力。

Link 组件：告别`<a>`标签的整页刷新

在原生 HTML 中，<a href="...">会让浏览器重新加载整个页面，这与客户端路由的目标相悖。React Router 导出了自定义的Link组件用于替代普通的a标签：点击Link时，请求被应用内编写的 JavaScript 拦截，而不是直接发给服务器，从而实现无刷新的视图切换：

import { Link } from "react-router"; const App = () => { return ( <div> <h1>Hello from the main page of the app!</h1> <p>Here are some examples of links to other pages</p> <nav> <ul> <li> <Link to="profile">Profile page</Link> </li> </ul> </nav> </div> ); }; export default App;

嵌套路由、Outlet 与动态片段

当需要根据不同的 URL 渲染页面中的某一部分时，可以使用嵌套路由：将子路由声明为父路由的children，父组件中通过Outlet组件占位，子路由匹配时Outlet会被对应的子组件替换。例如path: "profile"下的子路由{ path: "spinach", element: <Spinach /> }与{ path: "popeye", element: <Popeye /> }，访问/profile/popeye时父组件与子组件会同时渲染。

如果希望在父路径下没有指定子路径时渲染默认内容，可以添加索引路由（{ index: true, element: <DefaultProfile /> }）。

更进一步，当需要根据 URL 动态渲染内容时，可以使用动态片段（dynamic segments）：路径中的冒号（:）会把其后的片段变成"动态片段"，例如path: "profile/:name"中的:name可以匹配 URL 中该位置任意变化的值（通常称为 URL 参数 / params），组件内通过useParams钩子读取：

import { useParams } from "react-router"; const Profile = () => { const { name } = useParams(); // name === "popeye" ? <Popeye /> : name === "spinach" ? <Spinach /> : <DefaultProfile /> // ... };

处理无效 URL：errorElement

当用户访问错误或不存在的路径时（例如没有参数时访问/profile），应用会报错。此时可以在路由配置中传入errorElement，为应用提供一个统一的"页面未找到"兜底视图，例如一个带返回首页Link的ErrorPage组件。

Outlet 与状态传递、受保护路由

嵌套路由场景下，如果父组件持有 state 并希望传递给由Outlet渲染出的任意子组件（甚至"孙组件"），可以利用Outlet内置的contextprop，子组件中通过useOutletContext()钩子读取，若传入的是对象或数组还可以直接解构。这一模式与本仓库 react/more_react_concepts/managing_state_with_context_api.md 课程中的 Context API 用法相互呼应——该课程明确提到，本路由课程介绍的 outlet context 正是其前置知识。

此外，在实际应用中经常需要根据条件（如用户是否登录）决定某条路由是否可访问，即受保护路由（protected routes）：一种简单做法是条件性地构建路由配置，并结合useNavigate钩子在代码中编程式跳转（例如未登录用户被重定向到登录页）。

路由的测试与部署

组件一旦依赖路由上下文，测试时就不能直接渲染该组件，否则useNavigate、useParams或Link会抛错。此时测试环境（非浏览器环境）应使用MemoryRouter（轻量场景）或createMemoryRouter配合与生产一致的路由配置来渲染被测组件，这一点在 react/react_testing/introduction_to_react_testing.md 课程中亦有铺垫。

部署方面，由于 SPA 的路由由前端接管，托管平台需要把所有路径重写回index.html。仓库中的购物车项目作业 react/the_react_ecosystem/project_shopping_cart.md 给出了具体方案：Netlify 需要在public/下添加_redirects文件并写入/* /index.html 200；Vercel 需要在项目根目录添加vercel.json并配置rewrites规则；而使用HashRouter则是一种无需服务器配置的替代思路（早期课程 archive/javascript/react_js/project_shopping_cart.md 中对此有说明，GitHub Pages 等静态托管场景常采用该方案）。

动手练习建议

理论之外，实践是掌握路由的最佳方式：

在上文创建的应用基础上，自行添加几条新路由并反复修改、甚至删掉重写，这是巩固理解最好的练习。
通读 React Router 官方文档，无需逐字理解，重点回看本文讨论过的概念，将其作为日后常备的参考资料。
回顾本文涉及的进阶能力（Link、嵌套路由、Outlet、动态片段、errorElement等），亲手复现一遍从声明式路由到对象式路由的演进过程。

知识自测

什么是客户端路由？它与传统的多页面应用导航有何本质区别？
如何为一个 React 项目添加页面路由？
React Router 的三个核心组件分别是什么，各自承担什么职责？
如何确保路由（Router）中的链接被准确路由到目标页面？
为什么点击导航链接时应使用Link组件而不是<a>标签？
嵌套路由、动态片段（URL 参数）以及errorElement分别解决了什么问题？

结论

至此，你已经掌握了 React 路由的基础知识，足以开始在实际项目中使用react-router-dom。React Router 还有大量极具价值但超出本课范围的高级特性（例如 history 与 match 对象）。在熟悉这些基础概念之后，建议进一步深入探索更高级的路由用法，它们将在后续的完整应用开发中发挥重要作用。

【免费下载链接】curriculumThe open curriculum for learning web development项目地址: https://gitcode.com/GitHub_Trending/cu/curriculum

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

深入掌握 React Router：从客户端路由原理到 react-router-dom 实战