从零开始学习 React Router DOM：React Router DOM 基础 – wiki基地

从零开始学习 React Router DOM：React Router DOM 基础

欢迎来到单页应用（Single Page Application, SPA）的世界！在现代前端开发中，SPA 已经成为主流。与传统的多页应用不同，SPA 只需要加载一次 HTML、CSS 和 JavaScript，然后通过 JavaScript 动态地更新页面内容，从而提供更流畅、更接近原生应用的体验。

然而，SPA 带来了一个新的挑战：如何管理前端路由？ 在多页应用中，页面的切换依赖于浏览器地址栏的变化和服务器的响应。但在 SPA 中，地址栏的变化并不会触发页面的完全刷新，我们需要一种机制来根据 URL 的变化，在不重新加载整个页面的情况下，渲染不同的组件或视图。

这就是前端路由库的用武之地。对于 React 应用来说，最流行、最强大的前端路由解决方案莫过于 React Router DOM。它提供了一套丰富的组件和钩子（Hooks），帮助我们在 React 应用中实现声明式路由。

本篇文章将带你从零开始，深入理解 React Router DOM 的基础知识，包括它的核心概念、如何安装、如何配置，以及最常用的组件和钩子。学完本文，你将能够轻松地在自己的 React 应用中实现基本的页面导航和路由管理。

为什么选择 React Router DOM？

React Router DOM 是 React Router 家族的一部分，专门用于 Web 应用程序。它有几个显著的优点：

1. 声明式路由： React Router DOM 鼓励使用声明式的方式定义路由，就像你编写 React 组件一样。这使得路由配置更加直观和易于维护。
2. 与 React 生态紧密集成： 作为 React 生态的一部分，React Router DOM 与 React 的组件生命周期、状态管理等机制结合得非常好。
3. 功能强大且灵活： 它支持嵌套路由、URL 参数、编程式导航、路由守卫（虽然基础篇不深入，但它是重要的扩展功能）等多种高级功能。
4. 社区活跃，文档丰富： 遇到问题时，很容易找到解决方案和帮助。

好了，废话不多说，让我们开始学习吧！

第一步：安装 React Router DOM

在开始使用 React Router DOM 之前，你需要将其安装到你的 React 项目中。打开你的项目终端，运行以下命令之一：

使用 npm：

bash
npm install react-router-dom

使用 yarn：

bash
yarn add react-router-dom

安装完成后，你就可以在你的项目中导入并使用 React Router DOM 提供的组件和钩子了。

第二步：核心概念与基础组件

React Router DOM 的基础主要围绕以下几个核心概念和对应的组件：

1. 路由器 (Routers): 这是路由功能的入口，你需要用一个路由器组件包裹你的整个应用（或者至少是需要路由的部分）。它负责监听 URL 的变化，并根据配置匹配相应的路由。

   • BrowserRouter
   • HashRouter

2. 路由容器 (Routes): 这是一个新的组件（v6+ 版本引入），用于包裹所有的 Route 组件。它会遍历其子元素 Route，并渲染第一个匹配当前 URL 的 Route。

3. 路由 (Route): 定义了特定的 URL 路径应该渲染哪个组件。

   • Route

4. 链接 (Links): 用于在应用内部进行导航，避免浏览器整页刷新。

   • Link
   • NavLink

5. 渲染内容出口 (Outlet): 在嵌套路由中，用于标记子路由应该渲染在父组件的哪个位置（v6+ 版本）。

   • Outlet

6. 钩子 (Hooks): 用于在函数组件中获取路由信息或进行编程式导航。

   • useParams
   • useNavigate
   • useLocation (基础篇暂不详细展开，但它是常用的)

接下来，我们将逐一详细介绍这些组件和钩子。

2.1 路由器 (Routers): BrowserRouter vs HashRouter

你需要将你的应用的根组件（通常是 App 或 Index）包裹在一个路由器组件中。常用的有两种：

• BrowserRouter: 使用 HTML5 History API (pushState, replaceState, popstate) 来保持 UI 与 URL 的同步。它创建了“干净”的 URL，例如 http://localhost:3000/about。这是构建现代 Web 应用推荐的方式，因为它更符合用户习惯和 SEO 友好。但需要服务器端进行配置，将所有路由请求都重定向到你的应用入口文件（通常是 index.html），以便前端路由能够接管。
• HashRouter: 使用 URL 的哈希部分 (#) 来保持 UI 与 URL 的同步。例如 http://localhost:3000/#/about。哈希路由的优点是无需服务器端特殊配置，因为 # 后面的内容不会发送到服务器。缺点是 URL 不太美观，且对 SEO 不太友好。适合用于静态网站或无需服务器端配置的简单应用。

在绝大多数情况下，你会选择 BrowserRouter。我们将以 BrowserRouter 为例进行讲解。

使用示例：

在你的应用入口文件（例如 src/index.js 或 src/main.jsx）：

“`javascript
import React from ‘react’;
import ReactDOM from ‘react-dom/client’; // 或者 ‘react-dom’
import { BrowserRouter } from ‘react-router-dom’;
import App from ‘./App’;
import ‘./index.css’;

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

{/ 用 BrowserRouter 包裹你的应用根组件 /}




);
“`

或者在你的 App.js 文件中包裹主要内容：

“`javascript
// App.js
import React from ‘react’;
import { BrowserRouter, Routes, Route, Link } from ‘react-router-dom’;
import Home from ‘./pages/Home’;
import About from ‘./pages/About’;
import Contact from ‘./pages/Contact’;

function App() {
return (
{/ 也可以在这里包裹，但通常推荐在入口文件包裹 /}
{/ /}

    {/* Routes 是路由的容器 */}
    <Routes>
      {/* Route 定义具体的路由规则 */}
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/contact" element={<Contact />} />
    </Routes>
  </div>
{/* </BrowserRouter> */}

  {/* 当 URL 是 "/about" 时，渲染 About 组件 */}
  <Route path="/about" element={<About />} />

  {/* 当 URL 是 "/contact" 时，渲染 Contact 组件 */}
  <Route path="/contact" element={<Contact />} />

  {/* 可以定义一个通配符路由来处理未匹配到的路径（404页面） */}
  {/* 注意：通配符路由通常放在 Routes 的最后 */}
  <Route path="*" element={<div>404 - Page Not Found</div>} />
</Routes>
// ...