React Router v6 入门教程：构建你的第一个单页应用导航

欢迎来到 React 的世界！在你深入构建复杂的交互式界面时，很快会遇到一个核心问题：如何在不同的“页面”或视图之间切换，而不需要传统的浏览器页面刷新？这就是前端路由的用武之地，而 React Router 是 React 生态系统中最流行、功能最强大的路由库。

本教程将详细介绍 React Router 的基本概念、核心组件和常见用法，特别是针对最新的 v6 版本。我们将一步步构建一个简单的应用，学习如何定义路由、实现导航、处理动态参数以及构建基本的布局。

目标读者： 已经具备基本的 React 知识，并希望学习如何在 React 应用中实现前端路由的开发者。

我们将涵盖以下内容：

1. 什么是前端路由？为什么单页应用（SPA）需要它？
2. 为什么选择 React Router？
3. 安装 React Router v6
4. 核心概念与组件：
   • BrowserRouter (或其他 Router)
   • Routes
   • Route
   • Link
5. 构建一个简单的路由应用
6. 处理路由参数 (useParams)
7. 嵌套路由 (Outlet 和相对路径)
8. 编程式导航 (useNavigate)
9. 处理 404 (Not Found) 页面
10. 常见问题与最佳实践

1. 什么是前端路由？为什么单页应用（SPA）需要它？

在传统的 Web 开发中，每次用户点击链接或提交表单，浏览器都会向服务器发送请求，服务器处理请求后返回一个新的 HTML 页面。这个过程导致整个页面被重新加载，用户体验会受到中断。

单页应用（Single Page Application – SPA）的目标是提供更流畅、类似原生应用的体验。SPA 在初次加载时只下载一次 HTML、CSS 和 JavaScript 资源，后续的用户交互（如点击导航链接）不会触发整个页面的刷新。相反，JavaScript 会动态地改变页面上的内容。

但问题来了：虽然页面没有刷新，但用户仍然期望浏览器的前进/后退按钮能够工作，地址栏的 URL 能够反映当前“视图”的状态，并且能够通过 URL 直接访问应用的某个特定视图（书签、分享链接）。

这就是前端路由的作用。前端路由库（如 React Router）通过监听浏览器地址栏的变化，并根据 URL 匹配相应的组件或视图，然后将这些组件渲染到页面上，同时更新浏览器历史记录。这个过程完全由客户端的 JavaScript 控制，无需与服务器进行页面的完整交互。

简单来说：

• 传统多页应用 (MPA): URL 变化 -> 浏览器向服务器请求新页面 -> 服务器返回新 HTML -> 浏览器加载并显示新页面 (页面刷新)。
• 单页应用 (SPA) + 前端路由: URL 变化 -> 前端路由库监听并匹配 URL -> JavaScript 动态渲染对应组件 -> 更新浏览器历史记录 (无页面刷新)。

2. 为什么选择 React Router？

React Router 是 React 社区中最成熟、最受欢迎的路由解决方案。它具有以下优点：

• 声明式 API: 使用 React 组件的方式定义路由，与 React 的开发模式高度契合。
• 灵活性强: 可以很容易地实现各种路由需求，包括基本路由、嵌套路由、参数传递、重定向等。
• 活跃的社区和丰富的文档: 遇到问题容易找到解决方案，资源丰富。
• 支持多种环境: 不仅用于 Web (react-router-dom)，也支持 React Native (react-router-native)。
• Hooks 支持: 在函数式组件中方便地使用路由功能（useHistory, useLocation, useParams, useRouteMatch 在 v5 中；useNavigate, useLocation, useParams, useMatch 在 v6 中）。

本教程将专注于 react-router-dom，它是用于 Web 应用的版本。

3. 安装 React Router v6

首先，确保你已经创建了一个 React 项目（可以使用 Create React App、Vite 或其他方式）。

打开你的项目终端，运行以下命令安装 react-router-dom：

使用 npm:

bash
npm install react-router-dom

使用 yarn:

bash
yarn add react-router-dom

安装完成后，就可以开始使用 React Router 了。

4. 核心概念与组件

React Router v6 相对于 v5 有一些重要的改变，最明显的是引入了 Routes 组件和新的路由匹配方式。理解以下几个核心组件是掌握 React Router 的关键。

BrowserRouter (或其他 Router 组件)

BrowserRouter 是 React Router 在 Web 应用中最常用的 Router 组件。它使用 HTML5 History API (pushState, replaceState, popstate 事件) 来保持 UI 与 URL 的同步。这意味着你的 URL 看起来是标准的路径，例如 /about 或 /users/123。

你需要在应用的最顶层包裹 BrowserRouter，通常是在 src/index.js 或 src/App.js 中。

“`jsx
// src/index.js
import React from ‘react’;
import ReactDOM from ‘react-dom/client’; // For React 18+
import { BrowserRouter } from ‘react-router-dom’;
import App from ‘./App’;

const root = ReactDOM.createRoot(document.getElementById(‘root’));
root.render(

{/ 将你的整个应用包裹在 BrowserRouter 中 /}




);
“`

注意： 还有其他 Router 组件，例如 HashRouter (使用 URL 的哈希部分 # 来管理路由，例如 /about 会变成 /#/about，兼容性更好但 URL 不美观，不推荐用于新项目) 和 MemoryRouter (在内存中管理路由，常用于测试或非浏览器环境)。对于大多数 Web 应用，BrowserRouter 是首选。

Routes

Routes 是 React Router v6 中一个重要的概念。它取代了 v5 中的 Switch。

• Routes 的作用是遍历其所有的 Route 子元素，并渲染第一个与当前 URL 最佳匹配的 Route。
• 在 v6 中，你必须将所有的 Route 组件放在 Routes 组件内部。

“`jsx
// 在你的路由定义的地方（通常在 App.js 或单独的路由文件中）
import { Routes, Route } from ‘react-router-dom’;
// 导入你的页面组件
import Home from ‘./pages/Home’;
import About from ‘./pages/About’;
import Contact from ‘./pages/Contact’;

function App() {
return (

  {/* Routes 组件包裹所有的 Route */}
  <Routes>
    {/* Route 组件定义具体的路由规则 */}
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
    <Route path="/contact" element={<Contact />} />
  </Routes>

  {/* 页面底部或其他全局内容 */}
  <footer>...</footer>
</div>

  <main>
    {/* 在这里定义路由 */}
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/contact" element={<Contact />} />
    </Routes>
  </main>

  <footer>
    <p>&copy; 2023 我的应用</p>
  </footer>
</div>

  <main>
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/contact" element={<Contact />} />
      {/* 添加带参数的路由 */}
      <Route path="/users/:userId" element={<UserProfile />} />
    </Routes>
  </main>

  {/* ... 底部 */}
</div>

  <main>
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/contact" element={<Contact />} />
      <Route path="/users/:userId" element={<UserProfile />} />

      {/* 定义父级路由，使用 /* 表示匹配 /dashboard/ 开头的任何路径 */}
      <Route path="/dashboard/*" element={<DashboardLayout />}>
         {/*
           在这里定义子路由。
           注意：这些 path 是相对于父级 path (/dashboard/) 的。
           path="" 表示匹配父级路径本身 (/dashboard)。
           path="settings" 表示匹配 /dashboard/settings。
           不需要再次写 /dashboard/。
         */}
        <Route path="" element={<DashboardHome />} /> {/* 匹配 /dashboard */}
        <Route path="settings" element={<DashboardSettings />} /> {/* 匹配 /dashboard/settings */}
        {/* 可以添加一个嵌套的 404 路由，它只会在 /dashboard/* 下匹配不到时生效 */}
        <Route path="*" element={<div>Dashboard 子页面未找到</div>} />
      </Route>
    </Routes>
  </main>

  {/* ... 底部 */}
</div>

  <nav>
    <ul>
      <li>
        {/* Link to="" 相当于 Link to="/dashboard" 因为父级 path 是 /dashboard/* */}
        <Link to="/dashboard">Dashboard 概览</Link>
      </li>
      <li>
        {/* Link to="settings" 相当于 Link to="/dashboard/settings" */}
        <Link to="/dashboard/settings">Dashboard 设置</Link>
      </li>
      {/* 也可以使用绝对路径 */}
       <li>
        <Link to="/about">回到关于页面 (绝对路径)</Link>
      </li>
    </ul>
  </nav>

  <hr /> {/* 分隔线 */}

  {/* Outlet 是子路由元素应该渲染的位置 */}
  <div style={{ border: '1px dashed blue', padding: '10px' }}>
    <h3>子路由内容渲染区域:</h3>
    <Outlet />
  </div>

</div>

if (loginSuccessful) {
  // 使用 navigate 函数进行跳转
  // navigate('/dashboard'); // 跳转到 /dashboard
  // navigate('/users/me'); // 跳转到 /users/me
  navigate('/dashboard', { replace: true }); // 跳转并替换当前历史记录项

  // 也可以跳转回上一页或前进
  // navigate(-1); // 返回上一页
  // navigate(1); // 前进一页
} else {
  // 处理登录失败
  alert('登录失败！');
}

  <main>
    <Routes>
      {/* 定义其他所有具体的路由 */}
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/contact" element={<Contact />} />
      <Route path="/users/:userId" element={<UserProfile />} />
      <Route path="/dashboard/*" element={<DashboardLayout />}>
         <Route path="" element={<DashboardHome />} />
         <Route path="settings" element={<DashboardSettings />} />
         {/* 注意：这里的 * 只匹配 /dashboard/* 下未匹配的路径 */}
         {/* <Route path="*" element={<div>Dashboard 子页面未找到</div>} /> */}
      </Route>

      {/*
        定义 404 路由。
        重要：将其放在所有其他路由的最后！
      */}
      <Route path="*" element={<NotFound />} />
    </Routes>
  </main>

  {/* ... 底部 */}
</div>