react-routerv6通过嵌套来达到路由嵌套的效果的文章比比皆是,本文介绍通过路由表来实现嵌套路由.
v5路由表中的嵌套v5使用路由表,需安装另一个包react-router-config,创建一个js类型的router配置文件,如下:
且在需要在使用路由的组件中使用renderRoutes(routes)渲染路由,如下.
拿/discover页面为例,为了达到嵌套路由的效果,需要在HYDiscover组件中再使用renderRoutes(props.route.routes)渲染子路由,如下:
v6路由表中的嵌套而再v6中有所不同,v6中不需要再安装react-router-config包,官方已经实现react-router-config相关功能,详见Upgradingfromv5中的介绍.
v6中创建路由表需将该表创建为函数式组件,并且使用useRoutes(routes)钩子,最后返回useRoutes(routes)的返回值,其中routes中的属性与写法也有些不同,如下:
同样以/discover为例,我在使用嵌套路由时,仍想通过props.route.routes来实现,后来通过console.log(props)发现没有route属性,所以前往Upgradingfromv5查阅react-router-config相关内容,得知在Discover组件中使用Outlet组件即可实现,如下:
参考[1]Upgradingfromv5