在 React Router v5 中,写子路由,父级路由如果加了exact属性,就显示不了子组件

在 React Router v5 中,当你在父级路由上使用 exact 属性时,它意味着该路由只有在其 path 完全匹配当前 URL 时才会被激活。这意味着,如果父级路由精确匹配了,React Router 就不会继续向下查找子路由,因为 exact 限制了匹配范围。

例如,假设你有以下路由配置:

复制代码
<Route exact path="/parent" component={ParentComponent}>
  <Route path="/parent/child" component={ChildComponent} />
</Route>

在这个例子中,如果你访问 /parent,因为父级路由设置了 exact,它将匹配并仅渲染 ParentComponent。即使存在一个子路由 /parent/child,由于父级路由已经精确匹配,React Router 不会继续尝试匹配子路由,因此 ChildComponent 不会被渲染。

如果你希望同时能够访问父级和子级组件,应该移除父级路由上的 exact 属性,让路由系统有机会继续匹配子路由:

复制代码
<Route path="/parent">
  <Route path="/parent/child" component={ChildComponent} />
</Route>

这样配置后,访问 /parent 会渲染 ParentComponent,而访问 /parent/child 则会同时渲染 ParentComponent(作为容器)和 ChildComponent。如果没有其他路由与 /parent 完全匹配,就不需要 exact,因为默认情况下 Route 并不要求完全匹配。

相关推荐
无我Code4 分钟前
2025----前端个人年中总结
前端·年终总结·创业
程序猿阿伟7 分钟前
《前端路由重构:解锁多语言交互的底层逻辑》
前端·重构
Sun_light23 分钟前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子25 分钟前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
莫空000026 分钟前
Vue组件通信方式详解
前端·面试
呆呆的心26 分钟前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
百锦再26 分钟前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down
susnm31 分钟前
Dioxus 与数据库协作
前端·rust
优雅永不过时_v35 分钟前
基于vite适用于 vue和 react 的Three.js低代码与Ai结合编辑器
前端·javascript
小皮侠37 分钟前
nginx的使用
java·运维·服务器·前端·git·nginx·github