React Router v6：全面指南

React Router是React应用中最流行的路由库，它允许您在不同组件间根据URL进行导航，提供单页面应用（SPA）体验，无需重新加载整个页面即可更新内容。React Router v6是最新主要版本，相比前版，它带来了诸多改进、简化和新功能。

---

React Router v6 的核心功能与变化

1. 简化的API

   • React Router v6采用更简洁、直观的API定义路由和导航，避免了v5中许多变通方法的需要。

2. 路由元素（element属性）

   • v6中，路由使用element属性而非component或render属性。这允许直接传递组件进行渲染。
   • 旧版 (v5): component={ComponentName}
   • 新版 (v6): element={<ComponentName />}

3. 路由匹配

   • 路由匹配更直观。v6中，路由实现精确匹配，选择最佳匹配项，不再需要“兜底”路由来处理动态片段。
   • <Switch>组件被<Routes>替换，只渲染与URL匹配的第一个路由。

4. 嵌套路由

   • React Router v6简化了嵌套路由的定义。现在，您可以直接使用element属性定义嵌套路由，无需使用渲染函数或子元素嵌套。

5. 精确匹配默认化

   • React Router v6中，所有路由默认精确匹配，因此无需exact属性指定精确匹配。

6. React Router Hook

   • React Router v6更新了Hook以匹配新架构，包括useNavigate、useParams、useLocation、useMatch和useResolvedPath。

---

React Router v6 配置方法

要开始使用React Router v6，请按以下步骤操作：

1. 安装 React Router v6

您可以使用npm或yarn安装React Router v6：

Model Switcher

根据任务复杂度自动切换不同的AI模型。支持OpenClaw设置中的所有可用模型。当检测到复杂...

下载

<code class="bash">npm install react-router-dom@6
# 或
yarn add react-router-dom@6</code>

---

2. 定义路由和组件

下面是一个React Router v6中基本路由配置示例：

步骤一：定义主应用组件

<code class="javascript">import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';
import NotFound from './NotFound';

const App = () => {
  return (
    <Router>
      <Routes>
        <Route element={<Home />} path="/" />
        <Route element={<About />} path="/about" />
        <Route element={<NotFound />} path="*" />
      </Routes>
    </Router>
  );
};

export default App;</code>

• <Routes>: 取代了旧版本中的<Switch>组件，确保只渲染第一个匹配的路由。
• <Route element={<Home />} path="/" />: 定义主页路由并渲染Home组件。
• *`<Route path="" />`:** 通配符，处理404错误或不匹配的路由，当URL与任何路由都不匹配时渲染NotFound组件。

步骤二：创建独立组件

Home.js

<code class="javascript">import React from 'react';

const Home = () => {
  return <h2>主页</h2>;
};

export default Home;</code>

About.js

<code class="javascript">import React from 'react';

const About = () => {
  return <h2>关于我们</h2>;
};

export default About;</code>

NotFound.js

<code class="javascript">import React from 'react';

const NotFound = () => {
  return <h2>页面未找到</h2>;
};

export default NotFound;</code>

---

React Router v6 动态路由

为了处理动态路由，例如URL中包含用户ID的用户信息页面，React Router v6提供useParams Hook。

步骤一：定义动态路由

<code class="javascript">import React from 'react';
import { Routes, Route, useParams } from 'react-router-dom';

const UserProfile = () => {
  const { userId } = useParams(); // 从URL中提取userId

  return <h2>用户ID：{userId} 的用户信息</h2>;
};

const App = () => {
  return (
    <Routes>
      <Route element={<UserProfile />} path="/user/:userId" />
    </Routes>
  );
};

export default App;</code>

说明：

• :userId 是路由路径中的动态片段。useParams Hook允许您访问UserProfile组件中的userId值。
• 当您导航到/user/123时，UserProfile组件将渲染并显示userId为123。

---

React Router v6 嵌套路由

嵌套路由允许您在父路由中定义子路由，构建复杂的布局。

步骤一：定义父子路由

<code class="javascript">import React from 'react';
import { Routes, Route } from 'react-router-dom';

const Dashboard = () => {
  return (
    <div>
      <h2>仪表盘</h2>
      <Routes>
        <Route element={<Overview />} path="overview" />
        <Route element={<Settings />} path="settings" />
      </Routes>
    </div>
  );
};

const Overview = () => <h3>概览页面</h3>;
const Settings = () => <h3>设置页面</h3>;

const App = () => {
  return (
    <Routes>
      <Route element={<Dashboard />} path="/dashboard/*" />
    </Routes>
  );
};

export default App;</code>

说明：

• Dashboard组件包含用于概览和设置的嵌套路由。
• 父路由中的/*确保所有子路由都在/dashboard下处理。

---

React Router v6 Hooks

React Router v6引入了几个Hook用于导航和访问路由信息：

1. useNavigate: 以编程方式导航到不同的路由。
2. useParams: 访问动态URL参数。
3. useLocation: 获取关于当前位置（URL）的信息。
4. useMatch: 将当前URL与给定路由匹配。
5. useResolvedPath: 将路径解析为绝对URL。

示例：使用useNavigate Hook

useNavigate Hook允许在应用中进行编程导航。

<code class="javascript">import React from 'react';
import { useNavigate } from 'react-router-dom';

const RedirectToAbout = () => {
  const navigate = useNavigate();

  const goToAboutPage = () => {
    navigate('/about'); // 以编程方式导航到关于页面
  };

  return (
    <div>
      <button onClick={goToAboutPage}>跳转到关于页面</button>
    </div>
  );
};

export default RedirectToAbout;</code>

---

React Router v6 最佳实践

• 默认精确匹配: React Router v6默认精确匹配路由，无需exact属性，简化路由匹配。
• 使用element属性: 将JSX直接传递给element属性，而非component属性，简化代码，减少对渲染函数的需求。
• 嵌套路由: 使用嵌套路由构建复杂的页面布局，保持代码模块化和可维护性。
• 使用通配符路由处理404: 使用通配符*捕获所有不匹配的路由并显示404页面或将用户重定向到默认路由。

---

总结

React Router v6相比前版有诸多改进，包括更简单的API、更好的路由匹配以及对动态和嵌套路由的增强支持。通过利用useNavigate、useParams和useLocation等Hook，您可以在React应用中构建强大且灵活的路由系统。