React Router v6: 完整介绍与使用指南

在现代单页应用 (SPA) 中，路由是不可或缺的一部分。它允许用户在应用的不同视图之间导航，而无需重新加载整个页面，从而提供流畅的用户体验。对于 React 应用来说，React Router 是事实上的标准路由解决方案。

自 React Router v6 发布以来，它引入了许多激动人心的新特性、更简洁的 API 和性能优化，使得路由的设置和使用变得更加直观和高效。本文将深入探讨 React Router v6 的核心概念、API 以及如何在你的 React 项目中有效地使用它。

什么是 React Router？

React Router 是一个功能强大且灵活的库，它允许你将 URL 与 React 组件同步。它提供了一套声明式组件，让你可以在应用中轻松地定义路由、导航链接以及处理路由参数等。

为什么选择 React Router v6？

相较于之前的版本，React Router v6 进行了大幅度的改进：

• 更小的包体积：移除了不常用的 API，减少了最终打包文件的大小。
• 更简洁的 API：例如，Switch 被 Routes 取代，useHistory 被 useNavigate 取代，并且路由的定义方式更具表现力。
• 嵌套路由的改进：嵌套路由的处理更加自然和直观。
• 相对路径：支持在 Route 和 Link 中使用相对路径，提高了路由的灵活性。
• 新的 Hooks：引入了一系列新的 Hooks（如 useRoutes, useMatch），进一步简化了路由逻辑。

安装

首先，你需要在你的 React 项目中安装 React Router v6。

“`bash
npm install react-router-dom

或者

yarn add react-router-dom
“`

react-router-dom 是用于 Web 应用程序的包，它包含了核心的 react-router 功能以及针对 DOM 环境的特定组件（如 BrowserRouter）。

核心概念与组件

React Router v6 的核心思想是组件化路由。一切皆组件，包括你的路由配置。

1. BrowserRouter

BrowserRouter 是最常用的路由容器。它使用 HTML5 历史 API (pushState, replaceState, popstate) 来保持 UI 与 URL 的同步。通常，你会在应用的根组件中包裹你的整个应用。

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

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

{/ 包裹整个应用 /}



);
“`

2. Routes

Routes 组件取代了 v5 中的 Switch。它的作用是遍历其所有的 Route 子元素，并渲染第一个匹配当前 URL 的 Route。

3. Route

Route 组件用于定义单个路由。它接受两个主要的 props：

• path: 匹配的 URL 路径。
• element: 当 path 匹配时要渲染的 React 元素。

“`jsx
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 (

} />
} />
} />

);
}
“`

4. Link

Link 组件是用于在应用中创建导航链接的首选方式。它会渲染一个 <a> 标签，但会阻止浏览器默认的页面刷新行为，而是由 React Router 接管导航。

“`jsx
import { Link } from ‘react-router-dom’;

function Navigation() {
return (

);
}
“`

5. NavLink

NavLink 是一个特殊版本的 Link，它允许你在当前路由匹配时，为链接添加 active 类或应用自定义样式，常用于导航菜单高亮当前页。

“`jsx
import { NavLink } from ‘react-router-dom’;

function Navigation() {
return (

);
}
“`

NavLink 的 className 和 style props 可以接受一个函数，该函数会接收一个包含 isActive 属性的对象。

6. useNavigate Hook

useNavigate Hook 允许你在函数组件中进行编程式导航（即通过代码而不是点击 Link 来改变路由）。它返回一个函数，调用这个函数并传入目标路径即可实现导航。

“`jsx
import { useNavigate } from ‘react-router-dom’;

function Dashboard() {
const navigate = useNavigate();

const handleGoToSettings = () => {
navigate(‘/settings’);
};

const handleGoBack = () => {
navigate(-1); // 相当于浏览器后退
};

return (

);
}
“`

你也可以传递一个对象作为第二个参数，来传递 state：

jsx
navigate('/user/123', { state: { from: 'dashboard' } });

7. useParams Hook

useParams Hook 用于访问当前 URL 中的动态路由参数。

“`jsx
// 定义路由
} />

// 在 UserProfile 组件中
import { useParams } from ‘react-router-dom’;

function UserProfile() {
const { id } = useParams(); // 获取 URL 中的 :id 参数

return (

);
}
“`

8. useLocation Hook

useLocation Hook 返回一个 location 对象，其中包含当前 URL 的信息，例如路径名 (pathname)、查询字符串 (search) 和 state (state)。

“`jsx
import { useLocation } from ‘react-router-dom’;

function CurrentPageInfo() {
const location = useLocation();

// URL: /products?category=electronics&page=1
// location.pathname: “/products”
// location.search: “?category=electronics&page=1”
// location.state: (如果通过 navigate 传递了 state)

return (

);
}
“`

要解析查询字符串，你可以使用原生的 URLSearchParams API。

jsx
const queryParams = new URLSearchParams(location.search);
const category = queryParams.get('category'); // "electronics"

9. useMatch Hook

useMatch Hook 允许你检查一个路径是否与当前 URL 匹配，并返回匹配对象（如果匹配）或 null（如果不匹配）。这在某些需要手动判断路由匹配情况的场景中很有用。

“`jsx
import { useMatch } from ‘react-router-dom’;

function CustomNavLink({ to, children }) {
const match = useMatch(to);
const isActive = match !== null;

return (

{children}

);
}
“`

基本使用示例

让我们创建一个简单的应用来演示上述概念：

“`jsx
// src/pages/Home.js
import React from ‘react’;

function Home() {
return

Home Page

;
}
export default Home;

// src/pages/About.js
import React from ‘react’;

function About() {
return

About Us Page

;
}
export default About;

// src/pages/Contact.js
import React from ‘react’;

function Contact() {
return

Contact Us Page

;
}
export default Contact;

// src/App.js
import React from ‘react’;
import { Routes, Route, Link, NavLink } from ‘react-router-dom’;
import Home from ‘./pages/Home’;
import About from ‘./pages/About’;
import Contact from ‘./pages/Contact’;
import UserProfile from ‘./pages/UserProfile’; // 稍后创建

function App() {
return (

  <hr />

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

  <hr />

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

    {/* 嵌套路由 */}
    <Route path="/dashboard" element={<DashboardLayout />}>
      {/* 默认子路由，当访问 /dashboard 时渲染 */}
      <Route index element={<DashboardOverview />} /> 
      <Route path="overview" element={<DashboardOverview />} />
      <Route path="settings" element={<DashboardSettings />} />
      <Route path="reports" element={<DashboardReports />} />
    </Route>
  </Routes>
</div>

if (isAuthenticated) {
  // 模拟设置认证状态
  // 这里你需要将 isAuthenticated 状态提升到 App 或 Context 中
  // 例如：authContext.login();
  navigate(from, { replace: true }); // 登录成功后跳转
} else {
  alert('Login failed!');
}

    <hr />

    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/contact" element={<Contact />} />
      <Route path="/users/:id" element={<UserProfile />} />
      <Route path="/login" element={<Login />} />

      {/* 受保护的路由 */}
      <Route path="/dashboard" element={<RequireAuth><DashboardLayout /></RequireAuth>}>
        <Route index element={<DashboardOverview />} />
        <Route path="overview" element={<DashboardOverview />} />
        <Route path="settings" element={<DashboardSettings />} />
        <Route path="reports" element={<DashboardReports />} />
      </Route>

      <Route path="*" element={<NotFound />} />
    </Routes>
  </div>
</AuthContext.Provider>