了解最新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解释了他们如何获得此结果:
下午21:33-2020年2月16日
切换到路线
<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
浏览。它具有命令性和声明性选项。
结论
肯定会在接下来的日子里出现更多的细节。无论如何,我已经对看到的内容感到满意。
编码愉快!