了解最新Alpha版的功能

在撰写本文时，React Router v6在地平线上显示为Alpha版本。即使它是早期的Alpha版本，也有很多好消息要谈论。

您可能已经知道，React还有一个很棒的路由解决方案，称为Reach Router。到达路由器轻巧，易于使用，并着重于可访问性。它是由React Router的核心贡献者之一Ryan Florence构建的。正如Ryan在他的2019年中期博客文章中提到的那样，React Router和Reach Router将合并在一起，React Router将成为尚存的项目。

我们已经看到了使用Hooks API在v5.1中进行的第一个尝试，但是我们开始看到了v6的实际结果：嵌套路由，相对链接，相对路由，自动路由排名等等。

注意：在撰写本文时，使用了React Router v6.0.0-alpha.2。

获取React Router v6

运行以下命令以获取React Router v6：

npm install [email protected] [email protected]

捆束尺寸

与以前的版本相比，最大的改进之一是捆绑包的大小。与以前的版本相比，它减少了近70％。

• React Router v5.1.2：最小 9.4 kb +压缩
• React Router v6.0.0-alpha.2：最小 2.9 kb + gzip压缩

React Router的创建者Michael Jackson解释了他们如何获得此结果：

迈克尔杰克逊

@mjackson

@jacobmparis @ryanflorence有两件事：
-放弃对IE11之前版本的
支持-放弃对React <16.8的支持
-使用Google Closure编译器
-编写更好的代码😅

下午21:33-2020年2月16日

  20  359

切换到路线

<Switch>被替换为<Routes>。借助这一新的API，我们可以在一个地方定义所有路线，并具有自动路线排名以及相对路线和链接。

具有自动路线匹配功能的嵌套和相对路线

<Route> 发生了一些变化，使我们的生活更加轻松。

• <Route component>被罢免赞成<Route element>。
• <Route children> 已更改为接受子路线。
• 没有更多的<Route exact>和<Route strict>自路由自动匹配。
• <Route path> 相对于路线的层次结构。

相关链接

就像一样<Route path>，<Link to>也与路线的层次结构有关。如果省略开始/，则开始将相对于其所在的路径。

后代路线

您可以自由地<Routes>在一个应用程序中使用多个。组合小型应用程序以协同工作可能很有用。

useRoutes

您还记得react-router-config使您能够将路线定义为对象的软件包吗？好吧，那是历史。现在我们有了useRoutes钩子。

它与旧软件包相似，但有一些改进。您将路线定义为对象数组，将其传递到自定义钩子，然后获得可渲染的React元素。而已。

这是一个示例配置：

我希望，如果我说<Routes>这只是包装器组件，这对您来说不会是一个惊喜useRoutes。

useNavigate代替useHistory

useHistory现在是历史。它已被React的可暂挂导航API取代。从现在开始，您可以useNavigate浏览。它具有命令性和声明性选项。

结论

肯定会在接下来的日子里出现更多的细节。无论如何，我已经对看到的内容感到满意。

编码愉快！