react-router v6 通过 <Route> 嵌套来达到路由嵌套的成果的文章亘古未有, 本文介绍通过路由表来实现嵌套路由.
v5 路由表中的嵌套
v5 应用路由表, 需装置另一个包 react-router-config, 创立一个 js 类型的 router 配置文件, 如下:
且在须要在应用路由的组件中应用 renderRoutes(routes) 渲染路由, 如下.
拿 /discover 页面为例, 为了达到嵌套路由的成果, 须要在 <HYDiscover> 组件中再应用 renderRoutes(props.route.routes) 渲染子路由, 如下:
v6 路由表中的嵌套
而再 v6 中有所不同, v6 中不须要再装置 react-router-config 包, 官网曾经实现 react-router-config 相干性能, 详见 Upgrading from v5 中的介绍.
v6 中创立路由表需将该表创立为函数式组件, 并且应用 useRoutes(routes) 钩子, 最初返回 useRoutes(routes) 的返回值, 其中 routes 中的属性与写法也有些不同, 如下:
同样以 /discover 为例, 我在应用嵌套路由时, 仍想通过 props.route.routes 来实现, 起初通过 console.log(props) 发现没有 route 属性, 所以返回 Upgrading from v5 查阅 react-router-config 相干内容, 得悉在 <Discover> 组件中应用 <Outlet> 组件即可实现, 如下:
参考
[1] Upgrading from v5 https://github.com/remix-run/…