构建单页应用：React Router v6 核心概念与实战
构建单页应用：React Router v6 核心概念与实战
作者：码力无边
各位React航海家，欢迎登上《React奇妙之旅》的第十四艘航船！我是你们的船长码力无边。至今为止，我们构建的应用都还停留在“一个页面”的阶段。我们已经能在这个页面上做出非常复杂的交互和逻辑，但一个真正的Web应用，通常是由多个“页面”或“视图”组成的，比如首页、关于我们、产品列表、联系方式等等。
在传统的多页应用（MPA）中，每次用户点击一个链接，浏览器都会向服务器发送一个全新的请求，然后服务器返回一个完整的HTML文件，整个页面都会被刷新。这种体验在今天看来，已经显得有些“笨拙”和“缓慢”。
而现代Web应用的主流是单页应用（SPA, Single Page Application）。在SPA中，整个应用只在初始时加载一个HTML文件，后续所有的“页面”切换，都只是在前端通过JavaScript动态地替换页面上的某些部分，而无需重新加载整个页面。这带来了如原生应用般流畅、快速的用户体验。
那么，在React中，我们如何实现这种“页面”的切换和管理呢？答案就是引入一个前端路由库。而在React生态中，React Router是当之无愧的王者，是事实上的标准解决方案。
今天，我们将一起学习最新版本的React Router v6，掌握它的核心概念和使用方法。我们将学会如何定义路由、如何进行页面导航、如何处理动态路由参数，最终将我们的小应用，升级为一个具备多页面导航能力的真正SPA！扬帆，起航！
第一章：前端路由的“前世今生”
在开始敲代码之前，我们先花一分钟理解前端路由的核心思想。
前端路由的本质是：监听URL的变化，然后根据URL的不同，来渲染不同的组件，同时不向服务器发送新的页面请求。
它通常通过两种方式来监听URL的变化：
- Hash模式：利用URL中的
#号（hash）。URL中#号后面的部分发生变化，浏览器不会发送请求，但会触发hashchange事件。例如：https://example.com/#/home->https://example.com/#/about。 - History模式：利用HTML5 History API（
pushState,replaceState）。它允许我们直接修改URL的路径部分，而不会触发页面刷新。例如：https://example.com/home->https://example.com/about。这种模式的URL更美观，但需要服务器端进行相应的配置，以处理用户直接访问深层链接时返回正确的HTML文件。
React Router v6 默认使用History模式，并为我们封装好了所有底层的复杂性。我们只需要学习它提供的组件和API即可。
第二章：扬帆起航 —— 安装与基本配置
第一步：安装React Router
在你的React项目根目录下，打开终端，运行以下命令：
npm install react-router-dom@6
我们安装的是react-router-dom，因为它包含了在浏览器环境中运行所需的所有特定组件。
第二步：在main.jsx中配置BrowserRouter
BrowserRouter是React Router的核心组件之一。它利用History API来保持你的UI与URL的同步。我们需要在应用的最顶层，用它来包裹我们的根组件（通常是App）。
打开你的src/main.jsx文件：
// src/main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import { BrowserRouter } from 'react-router-dom'; // 1. 导入 BrowserRouter
import './index.css'ReactDOM.createRoot(document.getElementById('root')).render(<React.StrictMode>{/* 2. 用 BrowserRouter 包裹 App 组件 */}<BrowserRouter><App /></BrowserRouter></React.StrictMode>,
)
这一步就像是为我们的应用开启了“路由感知”能力。现在，App组件及其所有子组件，都可以使用React Router提供的各种功能了。
第三章：核心组件 —— Routes, Route, 和 Link
React Router v6的核心工作流程，主要围绕着三个组件展开。
1. <Routes> 和 <Route>：定义你的路由地图
<Routes>: 就像一个“路由交换机”。它会查看当前URL，并只渲染第一个路径匹配的<Route>。<Route>: 定义一条路由规则。它有两个最重要的prop：path: 匹配URL的路径。element: 当路径匹配时，需要渲染的组件。
让我们来改造App.jsx，创建一个包含首页、关于页和用户页的应用。
首先，创建几个页面组件：
在src/pages文件夹下（如果没有就新建一个）创建以下文件：
src/pages/HomePage.jsx
const HomePage = () => <h2>这是首页</h2>;
export default HomePage;
src/pages/AboutPage.jsx
const AboutPage = () => <h2>关于我们</h2>;
export default AboutPage;
src/pages/UsersPage.jsx
const UsersPage = () => <h2>用户列表页面</h2>;
export default UsersPage;
然后，在App.jsx中配置路由：
// src/App.jsx
import { Routes, Route } from 'react-router-dom';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';
import UsersPage from './pages/UsersPage';function App() {return (<div>{/* 导航链接部分，稍后添加 */}<h1>React Router v6 示例</h1><hr />{/* 路由出口：根据URL匹配并渲染对应的组件 */}<Routes><Route path="/" element={<HomePage />} /><Route path="/about" element={<AboutPage />} /><Route path="/users" element={<UsersPage />} /></Routes></div>);
}
export default App;
现在，启动你的应用。手动在浏览器地址栏中输入http://localhost:5173/、http://localhost:5173/about、http://localhost:5173/users，你会看到页面内容随着URL的变化而正确地切换，并且整个页面没有刷新！
2. <Link>：声明式的导航
我们总不能让用户手动输入URL来切换页面吧？我们需要可点击的导航链接。
你可能会想用<a>标签。千万不要！ <a>标签会触发浏览器的默认行为，导致整个页面重新加载，我们的SPA就白做了。
React Router提供了<Link>组件来代替<a>。它会在渲染时生成一个<a>标签，但它会阻止浏览器的默认行为，并通过History API来改变URL，从而触发<Routes>的重新匹配。
在App.jsx中添加导航栏：
// src/App.jsx
import { Routes, Route, Link } from 'react-router-dom'; // 导入 Link
// ... 导入页面组件 ...function App() {return (<div><h1>React Router v6 示例</h1>{/* 导航链接 */}<nav><Link to="/">首页</Link> |{' '}<Link to="/about">关于</Link> |{' '}<Link to="/users">用户</Link></nav><hr />{/* 路由出口 */}<Routes><Route path="/" element={<HomePage />} /><Route path="/about" element={<AboutPage />} /><Route path="/users" element={<UsersPage />} /></Routes></div>);
}
export default App;
现在，你的页面上出现了可以点击的导航链接了！点击它们，体验一下丝滑的无刷新页面切换吧。
第四章：进阶路由 —— 动态路由与嵌套路由
1. 动态路由：处理URL中的参数
我们经常需要创建像/users/1、/products/abc这样的URL，其中1和abc是动态的ID。React Router通过动态段 (Dynamic Segments) 来实现这一点。
动态段以冒号:开头。
首先，创建一个用户详情页组件：
src/pages/UserDetailPage.jsx
import { useParams } from 'react-router-dom';function UserDetailPage() {// 1. 使用 useParams Hook 来获取URL中的动态参数const params = useParams();return (<div><h2>用户详情</h2><p>正在查看的用户ID是: {params.userId}</p></div>);
}
export default UserDetailPage;
useParams Hook会返回一个对象，键是你在<Route>中定义的动态段名称，值是URL中实际匹配到的部分。
然后，在App.jsx中添加新的路由规则：
// ...
import UserDetailPage from './pages/UserDetailPage';// ...
<Routes><Route path="/" element={<HomePage />} /><Route path="/about" element={<AboutPage />} /><Route path="/users" element={<UsersPage />} />{/* 新增的动态路由：:userId 是一个占位符 */}<Route path="/users/:userId" element={<UserDetailPage />} />
</Routes>
// ...
现在，访问http://localhost:5173/users/123，UserDetailPage组件会被渲染，并且页面上会显示“用户ID是: 123”。
2. 嵌套路由 (Nested Routes)
嵌套路由是一种强大的模式，它允许你的UI结构与URL结构一一对应。比如，一个用户页面 /users，它内部可能还有子视图，如 /users/profile 和 /users/account。
<Route>组件可以像文件夹一样进行嵌套。
首先，创建一个共享的布局组件和两个子页面组件：
src/pages/UsersLayout.jsx (父路由组件)
import { Link, Outlet } from 'react-router-dom';function UsersLayout() {return (<div><h2>用户管理</h2><nav><Link to="/users/1">用户1</Link> |{' '}<Link to="/users/2">用户2</Link> |{' '}<Link to="/users">返回用户列表</Link></nav><hr />{/* Outlet组件是子路由的“占位符” */}<Outlet /></div>);
}
export default UsersLayout;
<Outlet>组件是嵌套路由的关键。它告诉父路由：“嘿，如果URL匹配到了我的某个子路由，就把那个子路由的element渲染在这里。”
修改路由配置，使用嵌套结构：
// src/App.jsx
// ...
import UsersLayout from './pages/UsersLayout';// ...
<Routes><Route path="/" element={<HomePage />} /><Route path="/about" element={<AboutPage />} />{/* 使用嵌套路由 */}<Route path="/users" element={<UsersLayout />}>{/* index route: 当URL是 /users 时，默认显示的子路由 */}<Route index element={<UsersPage />} /> {/* 子路由，它们的路径是相对于父路由 /users 的 */}<Route path=":userId" element={<UserDetailPage />} /></Route>
</Routes>
// ...
解读嵌套配置：
- 我们创建了一个父路由，路径是
/users，它渲染UsersLayout组件。 - 在这个父路由内部：
- 一个
index路由，它没有path。当URL正好是父路由的路径/users时，UsersPage会被渲染到UsersLayout的<Outlet>中。 - 一个子路由，路径是
:userId。当URL是/users/123时，UserDetailPage会被渲染到<Outlet>中。
- 一个
这种结构让你的代码组织更清晰，逻辑更内聚。
总结：React Router是SPA的“导航系统”
今天，我们成功地为我们的应用安装了强大的“导航系统”——React Router v6。现在，我们已经具备了构建一个真正的、多页面的单页应用的能力。
让我们来回顾一下这次航行的核心知识点：
- 单页应用 (SPA) 通过前端路由实现无刷新的页面切换，带来流畅的用户体验。
- 基本配置: 使用
npm install react-router-dom安装，并在main.jsx中用<BrowserRouter>包裹应用。 - 核心组件:
<Routes>: 路由的“交换机”。<Route>: 定义“URL路径”到“渲染组件”的映射规则。<Link>: 替代<a>标签，实现声明式的、无刷新的导航。
- 动态路由: 使用
:paramName的形式定义URL参数，并通过useParamsHook在组件中获取。 - 嵌套路由: 通过嵌套
<Route>组件，让UI布局和URL结构保持一致，并使用<Outlet>作为子路由的渲染出口，index路由定义父路径的默认内容。
React Router的功能远不止于此，它还包括编程式导航（useNavigate Hook）、处理404页面、路由懒加载等高级功能。但掌握了今天的内容，你已经足以应对80%以上的路由需求。
在下一篇文章中，我们将解决另一个关键问题：如何在React应用中优雅地与后端API进行通信？ 我们将学习如何使用fetch或axios库，在组件中请求数据，并处理加载、成功、失败等不同状态。
我是码力无边，为你成功驾驭React Router而喝彩！现在，去为你之前的Todo List应用，或者任何一个项目，添加上多页面的导航功能吧！我们下期再会！