React Router V6变化

官网：React Router
在进行项目时，遇到了React Router升级导致的问题，故特地找来官方API研究，但官方文档还未翻译，借助对V5的理解与翻译软件的帮助对官网的《Upgrading from v5》进行翻译记录。这一篇主要是记录React Router 版本变化，但由于个人开发经验所限，在记录的过程中省去了不熟悉的内容，详细的还是得参考官网。由于基本是把官网粗略的“翻译”了一下，故篇幅较多，而且问题不少，望指出我的不足之处。其中也有还没有实践过的内容。

总的来说，我能感知和理解的v6具体变化具体是以下四个：

1. <Switch>替换为<Routes>
2. <Route>的改变
3. <Link>的改变
4. <useHisttory>替换为<useNavigate>

一、 升级到 React v16.8

V6大量使用了React Hooks，所以需要使用 React 16.8 或更高版本。

二、从 React Router v5.1升级

可以平滑的过渡到V6

（一）、去除了<Switch>中的<Redirect>

如果想重定向，将<Redirect>移动到<Route rende> prop 中。

// 更改前
<Switch>
  <Redirect from="about" to="about-us" />
</Switch>

// 更改后
<Switch>
  <Route path="about" render={() => <Redirect to="about-us" />} />
</Switch>

不在<Switch>内的<Redirect>元素得到保留。他们将在V6中成为元素。

（二）、重构自定义<Route>

略。

三、升级到 React Router v6：

准备

先安装v6版：

$ npm install react-router-dom

（一）、将所有<Switch>升级到<Routes>

v6 引入了一个类似于Switch但更强大的组件Routes。

要使用 v6，需要将所有<Switch>元素转换为<Routes>。如果已经升级到 v5.1，那么已经完成了一半

在v5中，必须非常明确地说明希望如何嵌套路由和链接（nest routes and links）。在这两种情况下，如果想嵌套路由和链接（nested routes and links），则必须从父路由（parent route’s）的match.url 和match.path属性构建<Route path> 和<Link to> 。

此外，如果要嵌套路由（nest routes），则必须将它们放在子路由的组件中。

V5与V6对比：

在此示例中，有关 v6 需要注意的一些重要事项：

• <Route path>和<Link to>是相对的。这意味着它们会自动在父路由的路径和URL上构建，因此不必手动插值或match.url或match.path。
• <Route exact>消失了。相反，具有后代路由（在其他组件中定义）的路由在其路径中使用一个尾随*符号来指示它们精确匹配。
• 可按照所需的任何顺序放置路由，路由器将自动检测当前URL的最佳路由。这可以防止由于手动将路由按错误的顺序放入<Switch>。

注意： v5 应用中的所有<Route children>内容在 v6中都已更改为<Route element>。

由此我们可以引出<Route element>的优点。

（二）、[这里是代码037]的优点

在 v6