构建单页应用：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的变化：

1. Hash模式 ：利用URL中的#号（hash）。URL中#号后面的部分发生变化，浏览器不会发送请求，但会触发hashchange事件。例如：https://example.com/#/home -> https://example.com/#/about。
2. 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。现在，我们已经具备了构建一个真正的、多页面的单页应用的能力。

让我们来回顾一下这次航行的核心知识点：

1. 单页应用 (SPA) 通过前端路由实现无刷新的页面切换，带来流畅的用户体验。
2. 基本配置 : 使用npm install react-router-dom安装，并在main.jsx中用<BrowserRouter>包裹应用。
3. 核心组件 :
   • <Routes>: 路由的"交换机"。
   • <Route>: 定义"URL路径"到"渲染组件"的映射规则。
   • <Link> : 替代<a>标签，实现声明式的、无刷新的导航。
4. 动态路由 : 使用:paramName的形式定义URL参数，并通过useParams Hook在组件中获取。
5. 嵌套路由 : 通过嵌套<Route>组件，让UI布局和URL结构保持一致，并使用<Outlet>作为子路由的渲染出口，index路由定义父路径的默认内容。

React Router的功能远不止于此，它还包括编程式导航（useNavigate Hook）、处理404页面、路由懒加载等高级功能。但掌握了今天的内容，你已经足以应对80%以上的路由需求。

在下一篇文章中，我们将解决另一个关键问题：如何在React应用中优雅地与后端API进行通信？ 我们将学习如何使用fetch或axios库，在组件中请求数据，并处理加载、成功、失败等不同状态。

我是码力无边，为你成功驾驭React Router而喝彩！现在，去为你之前的Todo List应用，或者任何一个项目，添加上多页面的导航功能吧！我们下期再会！