在撰写本文时，React Router v6 仍处于 alpha 中，但现在是时候开始玩它并探索即将发生的事情了。本指南将让您一窥新功能和更改点！
在2018年，React Router 主要维护人员 forke了React Router项目，创建了一个名为Reach Router的轻量级替代方案。
在此期间，两个库都在增长，但是似乎Reach Router的活跃开发将停止，并将被合并到即将发布的React Router v6中。
随着发布即将推出，下面是未来内容的！
<switch>变为<routes>/<switch>
该顶级组件将被重命名，但其功能大部分保持不变。
只需在其中放置<routes>：
<route>的重大更改/<route>
在v6中，<route>组件正在接受最大的修改，幸运的是，这些新更改实际上将使它更易于使用！
component/render prop将替换为 element prop：
在v6中，现在传递 prop 要容易得多。这否定了在 v5 中使用 render prop。
嵌套路由更简单
v5中的嵌套路由必须非常明确地定义，这要求在这些组件中包含许多字符串匹配逻辑。如 <profule>：
在 v6 中，可以删除字符串匹配逻辑，也不需要使用 useRouteMatch() ！结果是令人愉快的
注意：<outlet> 组件的使用类似于React Router v6中的 {this.props.children}，这是Reach Router的一项非常受欢迎的功能！
useNavigate代替useHistory
有时，您可能需要以编程方式进行导航，例如，在用户提交表单之后，需要将他们重定向到确认页面。这是v5中的 useHistory 库，在v6中已重命名为 useNavigate：
现在 history.push() 将替换为 navigation()：
在某些情况下，您需要替换浏览器历史记录中的URL，而不是推送新的URL。对于v6，这已发生了一些变化：
从20KB到8KB
通过所有这些更改，您预 bundle 大小会增长，但实际上减少了一半！v5的最bundle约为20kb，而v6仅为8kb。
Bundle 包大小是使用bundlephobia工具计算的。
结束语
我对React Router v6的发布感到非常兴奋又难过，我貌似现在用的还是v4？。
您可以在最新发行说明中阅读有关React Router v6的更多信息
有关新功能的完整列表，请参见官方的React Router v6迁移指南
你现在使用的React Router是v4还是v5呢？下方留言发表你的答案，大家一起观察以下。
感谢您的阅读，本头条号聚焦大前端技术和程序员成长，如果对你有所启发和帮助，可以点个关注、收藏。
作者简介：同名微信公众号作者，Web前端工程师，全栈开发工程师、持续学习者。
现在关注做同名微信公众号，送精品视频视频教程大礼包！
閱讀更多 做工程師不做碼農 的文章
