react-router|react-router v6 中的嵌套路由
react-router v6 通过
v5 路由表中的嵌套
v5 使用路由表, 需安装另一个包 react-router-config, 创建一个 js 类型的 router 配置文件, 如下:
文章图片
且在需要在使用路由的组件中使用 renderRoutes(routes) 渲染路由, 如下.
文章图片
拿 /discover 页面为例, 为了达到嵌套路由的效果, 需要在 组件中再使用 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 相关内容, 得知在
【react-router|react-router v6 中的嵌套路由】
文章图片
参考
[1] Upgrading from v5 https://github.com/remix-run/...
推荐阅读
- 随笔|杀人不见血系列之二（项目中的【政治】）
- TDengine|TDengine 在智慧矿山系统中的应用
- 下拉推荐在 Shopee Chatbot 中的探索和实践
- C语言|C语言 详解如何删除有序数组中的重复项
- Android中的Coroutine协程原理详解
- python图像识别数字_sklearn例程:识别图像中的手写数字
- 搜索专题|搜索中的判重（以BFS为例）
- 课程理论|论文解读——神经网络翻译中的注意力机制 以及 global / local attention
- 人工智能|一文看懂CV中的注意力机制
- Vue3中的ref与toRef