在 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 并不要求完全匹配。

相关推荐
theOtherSky6 分钟前
element+vue3 table上下左右键切换input和select
javascript·vue.js·elementui·1024程序员节
Baklib梅梅15 分钟前
无头内容管理系统:打造灵活高效的多渠道内容架构
前端·ruby on rails·前端框架·ruby
会联营的陆逊28 分钟前
JavaScript 如何优雅的实现一个时间处理插件
javascript
over69735 分钟前
浏览器里的AI魔法:用JavaScript玩转自然语言处理
前端·javascript
Amy_cx42 分钟前
搭建React Native开发环境
javascript·react native·react.js
代码AI弗森44 分钟前
Python × NumPy」 vs 「JavaScript × TensorFlow.js」生态全景图
javascript·python·numpy
疏狂难除1 小时前
关于spiderdemo第二题的奇思妙想
javascript·爬虫
渣渣盟1 小时前
探索Word2Vec:从文本向量化到中文语料处理
前端·javascript·python·文本向量化
Pu_Nine_91 小时前
Vue 3 + TypeScript 项目性能优化全链路实战:从 2.1MB 到 130KB 的蜕变
前端·vue.js·性能优化·typescript·1024程序员节
云枫晖2 小时前
Webpack系列-Loader
前端·webpack