React ROUTER之嵌套路由

第一张是需要修改router文件createBrowserRouterd参数数组中的路由关系

第二张是需要在一级路由的index.js中选择二级路由的位置

第一步是在全局的router.js文件中加入新的children属性,如图

第二步是在一级路由的index.js文件中声明outLet组件

默认二级路由

在未点击一级路由跳转二级路由的按钮时就已经将一个默认的二级路由渲染出来的操作

1.把想要的默认二级路由Path干掉

2.增加一个index属性并设置为true

并且一级路由组件的index.js也需要修改

404兜底组件




两种路由模式

相关推荐
Mintopia7 分钟前
别再迷信“最佳实践”:适合你项目的才是对的
前端·架构
console.log('npc')8 分钟前
react弹窗组件
前端·javascript·react.js
LlNingyu15 分钟前
文艺复兴,什么是CSRF,常见形式(二)--SameSite属性
前端·网络·安全·web安全·csrf
一点 内容15 分钟前
深入浅出:解锁React Hooks的魔法——从入门到实战优化指南
javascript·react.js·ecmascript
紫_龙18 分钟前
最新版vue3+TypeScript开发入门到实战教程之组件通信之一
前端·vue.js·typescript
故以往之不谏19 分钟前
JAVA--类和对象4.1--构造方法基础
java·开发语言·javascript
yivifu23 分钟前
接近完美的HTML文本双行合一排版
前端·javascript·html·双行合一
fxshy24 分钟前
前端直连模型 vs 完整 MCP:大模型驱动地图的原理与实践(技术栈Vue + Cesium + Node.js + WebSocket + MCP)
前端·vue.js·node.js·cesium·mcp
鹏程十八少26 分钟前
10. Android Shadow是如何实现像tinker热修复动态修复so(源码解析)
android·前端·面试
destinying29 分钟前
性能优化之项目实战:从构建到部署的完整优化方案
前端·javascript·vue.js