如何通过 4 个步骤升级 React Router

2022/8/30 23:24:53

编程Tag： react 组件版本 router 路由步骤

本文主要是介绍如何通过 4 个步骤升级 React Router，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

如何通过 4 个步骤升级 React Router

React-router 版本 6 已发布，这非常重要，因为 react-router 是最常用和最重要的 react 包之一，您会发现很多 react 项目需要路由，因此很多 react 项目确实使用 react-本文中的路由器我将向您介绍 react-router 版本 6 的新功能，当然我还将向您展示如何将使用 react-router 版本 5 的现有 react 应用程序更新到 react-router 版本 6。

现在要了解 react-router 版本 6，您当然可以查看官方网站 reactrouter.com 和您在那里找到的文档，特别是还有一个升级指南，您可以在其中找到详细的升级步骤，您还可以在其中了解新功能和发生了什么变化，这是一个相当长的文档，如果您想了解所有细节，您绝对应该深入研究它。

但最后，升级真的很简单，而且我们在后台编写的代码没有太大变化，版本 6 比版本 5 好很多，因此如果你可以升级，你当然应该强烈考虑这样做那。

现在看看发生了什么变化并编写了一些代码，我创建了一个小快照，一个小项目快照，本文末尾将给出 git repo 链接，它使用 react-router 版本 5，因此不使用版本 6。

因此，一旦您下载并提取了该快照，您应该运行 npm install 来安装该项目附带的所有核心依赖项，一旦您安装了 react-router 版本 6，您应该通过运行 npm install react-router-dom 来完成此操作重要的是，您需要 react-router -dom 这是 react-router 的浏览器版本，然后添加 @6 以确保您安装最新版本 6，这就是我们可以在这里做的：

因此，安装后，我们得到了 react-router 版本 6。如果我现在运行 npm start，您将看到如果我尝试访问此页面，该项目将无法运行，我现在收到一个错误，即未从 react-router 导出开关-dom：

这是使用 react-router 版本 5 时的第一个更改，我们使用由 react-router 包提供的这个开关组件来包装我们的路由，并确保同时加载这些路由中的一个而不是全部匹配路线，通常这是您希望定义多条路线但在给定时间点应该只有一条路线处于活动状态：

现在使用 react-router 版本 6 交换机不再存在，而是现在成为路由，因此您将交换机替换为路由，因此，您从 react-router-dom 而不是交换机导入路由

顺便说一句，没有改变的是您仍然从 react-router-dom 导入浏览器路由器，并将其包装在您的应用程序中，然后您计划使用与您所知道的语法完全相同的路由：

这样，错误就消失了，但是如果我单击欢迎或产品，您会看到 URL 发生了变化，但我仍然在屏幕上看不到任何内容：

原因是我们定义路由的方式也发生了变化，我们仍然有路由组件，它仍然需要一个路径属性：

但是当给定路径变为活动状态时应该加载的组件，因此在这种情况下，例如，欢迎组件不再是您的路线的孩子，而是在路线上添加一个新的元素道具，然后您传递一个动态元素的值和动态值是将组件呈现为重要的 jsx：

因此，您不会将 welcome 作为字符串传递，您不会将指针传递给该组件函数，而是传递 jsx 元素，因此它需要一个 jsx 元素的 name 元素，然后这当然可以成为一个自关闭组件这个路由组件，我们在这里对产品做同样的事情，我们还添加元素道具，然后我们将产品移动到这个道具中，而我们将它设置为这个道具的值，我们把它变成一个自动关闭的组件，最后但是不仅如此，我们还为最后一条路线执行此操作，请注意，这是一条动态路线，并且在您学习它时仍然有效，因此您仍然可以像使用未更改的版本 5 一样拥有动态路径参数，如产品 ID：