将你的 React 应用迁移到 React Router v6

路由在任何前端项目中都至关重要，之前的 React Router 版本在简化 React 和 React Native 开发者的路由配置方面发挥了重要作用。
本文将重点介绍 react-router-dom，它是大多数 React Web 应用用于配置路由的包。
在了解最新版本 React Router 6 之前，本文将首先介绍如何使用旧版本的 React Router 进行路由。

本文面向希望将 React 应用从旧版本 React Router 迁移到 React Router v6 的开发者。如果您是 React Router 新手，本文也同样适合您。我将逐步讲解如何在 React 项目中使用 React Router 及其最新特性。

先决条件

要学习本教程，您需要以下物品：

• 文本编辑器
• 您的计算机上已安装 Node.js。
• 具备HTML、CSS和JavaScript的基本操作知识
• 具备 React 的实际操作经验

React Router 版本 5 (v5) 快速入门

在 React Router v5 中，我们在根 App 组件中声明所有路由，该BrowserRouter组件包裹整个应用程序。

//./index.js
<BrowserRouter>
  <App />
</BrowserRouter>

//./App.js
const App = () => {
  return (
    <div className="App">
      <nav>
        <Link to="/">Home Page</Link>
        <Link to="/about">About Page</Link>
        <Link to="/product">Product Page</Link>
        <Link to="/contact">Contact Page</Link>
      </nav>

      <Switch>
        <Route></Route>
      </Switch>
    </div>
  );
};

export default App;

这就是使用 React Router v5 或更早版本时搭建典型 React 应用的方式。
在 App 组件中，我们有一个导航栏，它包含了LinkReact Router 提供的组件，用于帮助我们在应用中导航到不同的页面。
导航栏之后是 SwitchSwitch组件，它包裹了应用中的所有路由。Switch
组件Switch的作用是包裹应用中的所有路由，并确保同一时间只有一个路由处于活动状态。
所有单独的路由和页面组件都注册在 Switch 组件中。

<Switch>
  <Route exact to="/">
    <Home />
  </Route>
</Switch>

在这里，我们在 Route 组件中指定一个路径，而我们想要为该路径渲染的页面组件也嵌套在 Route 组件中。

<Switch>
  <Route exact to="/" component={<Home />} />
</Switch>

我们还可以使用 Route 组件上的 component prop 而不是嵌套，来指定应该为特定路径渲染哪个组件。

如果你是 React Router 的新手，现在应该对它的工作原理有所了解了。如果你已经了解它的工作原理，那么让我们深入了解 React Router 版本 6。

接下来是 React Router 版本 6 (v6)

入门

打开终端，运行以下命令创建一个新的 React 项目：

> npx create-react-app ReactRouterv6Demo
> cd ReactRouterv6Demo

接下来，在 React 应用中将 React Router 安装为依赖项：

> npm install react-router-dom@6

此命令将安装最新版本react-router-dom，即版本 6。
安装 React router 依赖项后，我们需要向 src/index.js 文件中添加一些代码。

// React Router v6
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { BrowserRouter } from "react-router-dom";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

我们从 react-router-dom 导入BrowserRouter组件，然后用该BrowserRouter组件包裹 App 组件，现在我们已经设置好在我们的应用程序中使用 React Router 组件和 hooks。

React Router v6 中的路由配置

在之前的 React Router 版本中，组件会包裹App 中的Switch各个组件。Route

在 React Router v6 中，每个元素Route都被放置在一个Routes组件中。

// React Router v6
<Routes>
  <Route />
  <Route />
</Routes>

该Routes组件替换了SwitchReact Router v6 中的组件。

// React Router v6
// ./ App.jsx
import { Routes, Route } from "react-router-dom";
import About from "./components/About";
import Home from "./components/Home";

const App = () => {
  return (
    <div className="App">
      <h1>React Router</h1>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </div>
  );
};

export default App;

React Router v6 的另一个变化在于注册导航到特定路径时要渲染的页面组件的方式。
这里我们不再嵌套组件，而是使用elementReact Router v6 提供的 prop，该elementprop 会设置为我们要渲染的页面组件。
此外，在 React Router v6 中我们不再需要 ` exactroute` 关键字，因为 v6 中 Route 组件的默认行为是精确匹配每个定义的路径。

如何设置 404 页面

在之前的 React Router 版本中，我们会像这样设置 404 页面的路由；

<Route>
    <NotFound />
<Route/>

NotFound 组件是当用户登录到不存在的页面时要渲染的页面组件，而且我们在这里没有指定路径。

接下来，我们来看看如何在 v6 中设置 404 页面。
首先NotFound在组件文件夹中创建一个组件。

//./component/NotFound.js
import React from "react";

const NotFound = () => {
  return (
    <div>
      <h1>404 Page</h1>
      <p>The page you are trying to access does not exist</p>
    </div>
  );
};

export default NotFound;

接下来我们将设置 404 页面路由

<Route path="*" element={<NotFound />} />

以下是我们在 React Router v6 中设置路由的方式404page Route：我们有一个捕获所有路由的路径，即 `/etc/routes/routes/` "*"，我们指定的这个路径会捕获任何试图访问不存在的页面的用户，并显示`/etc/routes/routes/ 404page`。

当您登录到不存在的路线时，您应该会看到类似这样的 404 页面。

在路由组件中编写内联 JSX 模板

在 React Router v6 中，我们可以将一些 JSX 模板内联到elementprop 中，而无需创建页面组件。

<Route
  path="/test"
  element={
    <div>
      <h2>Test Page</h2>
      <p>Hello test page</p>
    </div>
  }
/>

当我们登录时，浏览器中会呈现一个类似的页面。/test

重定向

接下来，我们将研究如何对某些路由进行重定向，以及如何以编程方式重定向用户。

在之前的 React Router 版本中，我们使用Redirect组件来执行重定向。

在 v6 版本中，该Redirect组件已不存在，取而代之的是 React Router v6 中的一个新组件，即该Navigate组件。

<Route path="/redirect" element={<Navigate to="/about" />} />

当用户登录时/redirect，用户将被重定向到该About页面。

程序化重定向

在之前的 React Router 版本中，我们使用useHistoryhook来以编程方式重定向用户。

import {useHistory} from "react-router-dom"
const history = useHistory()

<button onClick={() => history.push("/products")} >Click me</button>

在 React Router v6 中，`useHistory` useHistoryhook 被 `useHistoricalHouter` hook 取代useNavigate，useNavigate`useHistoricalHouter` hook 的工作方式与 `useHistory` hook 完全相同。

import {useNavigate} from "react-router-dom"
const navigate = useNavigate()

<button onClick={() => navigate("/products")} >Click me</button>

useHistory使用hook 和使用hook的区别useNavigate在于，我们不需要调用useNavigatehook 上的 push 方法来重定向用户。

嵌套路由

在之前的 React Router 版本中，我们是这样嵌套路由的。

<Route path="/about/offers>
  <Offers />
</Route>

React Router v6 中嵌套路由的处理方式有所改变。
首先，我们需要导入 `<route>`Routes和 ` Route<route>` 组件。

// ./Product.jsx
import { Routes, Route } from "react-router-dom";
import Offers from "./Offers";

<Routes>
  <Route path="/offers" element={<Offers />} />
</Routes>;

在 React Router v6 中，Route 组件将嵌套在 Routes 组件中，我们使用 element prop 来设置要渲染的页面组件，这与之前的版本不同，之前的版本只是将页面组件嵌套在 Route 组件中。

v6 版本中嵌套路由的另一个变化在于路径的设置方式。以前嵌套路由的路径会直接写出父路径，现在嵌套路由的路径会相对于父路径。例如，
优惠页面的路径就直接附加到父路径（产品页面）的末尾。

接下来，在包含应用程序所有路由的 App.jsx 文件中，我们需要对链接到产品页面的 Route 组件进行一些更改。

<Route path="/product" element={<Product />} />

此产品路径组件目前设置为完全匹配产品路径，其后的所有内容都"/product"将被忽略，这意味着嵌套的优惠路径也将被忽略。
为了避免这种情况，我们需要"/*"在产品路径中添加一些内容。

<Route path="/product/*" element={<Product />} />

"/*"用于匹配产品路径之后的任何别名或路径的方法。

结论

如果你读完了这篇文章，现在应该对 React Router v6 有了良好的基础知识，并且能够在 React 项目中使用它。
这篇文章就到这里，关于 React Router 还有更多内容我们没有涉及。

您可以查看以下资源，了解更多关于 React Router v6 的信息👇：

• React Router 文档

• React Router 指南

请阅读以下资料。

一如既往，感谢您的阅读，请点赞👍并分享给其他人，如果您还有任何疑问，请在评论区留言。谢谢阅读！💖

如果你像我一样喜欢阅读这篇文章，那就点赞并分享给你的朋友，也欢迎在推特上关注我👨‍💻。