React-Router v6 新特性解读及迁移指南

Posted 2023-03-16

参考技术A

18 年初， React Router 的主要开发人员创建一个名为 Reach Router 的轻量级替代方案。

原来是相互抗衡的，却没想 React Router 直接拿来合并（真香！）

目前 v6 已是测试最后一版，估计新的特性不出意外就是下面这些了：

该顶级组件将被重命名。但是，其功能大部分保持不变（嗨，瞎折腾）。

component/render 被 element 替代

总而言之，简而言之。就是变得更好用了。

具体变化有以下：

v5 中的嵌套路由必须非常明确定义，且要求在这些组件中包含许多字符串匹配逻辑（活久见啊，终于意识到这个问题了。）

且看之前的处理：

而在 v6 中，你可以删除字符串匹配逻辑。不需要任何 useRouteMatch() ！

当然，还有更酸爽的操作，直接在路由里定义 <Route> 的 <Route> ，然后用接下来的一个新 API ： Outlet

这玩意儿，像极了 this.props.children ，具体用法看以下例子：

以前，我们只能 在 React App 中使用一个 Routes 。但是现在我们可以在 React App 中使用多个路由，这将帮助我们基于不同的路由管理多个应用程序逻辑。

从一目了然改到双目失明。。。

总感觉 React Router 团队有点儿戏。。。

现在， history.push() 将替换为 navigation() ：

history 的用法也将被替换成：

感觉又是一波强行 hooks ，但还是相对于之前简洁了一些。。。

React Router v6 给我们带来方便的同时，还把包减少了一半以上的体积。。。

感觉可以去看一波源码了。。。

官方的迁移指南在这里：React Router v6 迁移指南

其实上面所列的新特性，基本就是迁移的全部内容了。

基础的起手式就是更新包：

其中我觉得特别需要注意的一点是： React Router v6 使用简化的路径格，仅支持 2 种占位符：动态: id 样式参数和 * 通配符

以下都是 v6 中的有效路由路径：

使用 RegExp 正则匹配的路径将无效：

v6 中的所有路径匹配都将忽略 URL 上的尾部" / "。实际上， <Route strict> 已被删除并且在 v6 中无效。这并不意味着您不需要使用斜杠。

在 v5 版本之前的路径，存在路由歧义

React Router v6 修复了这种歧义，取消了尾部" / "：

其形式更像命令行 cd 的用法：

参考文章：