Java编程网

分享 Java Web 开发相关知识

在三分钟内完成Router v6

了解最新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:

捆束尺寸

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

《在三分钟内完成Router v6》

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

切换到路线

<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浏览。它具有命令性和声明性选项。

结论

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

编码愉快!

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注