React层级组件使用Switch和Route时/settings子路由不显示的原因是什么

问题原因 #

核心问题出在App.js的根路由配置上：你给匹配Home组件的/路由添加了exact严格匹配属性。当访问/settings路径时，App.js内的Switch组件会从上到下逐一匹配路由：

• exact path='/'要求路径完全等于/才能命中，/settings不符合要求，Home组件不会被渲染
• 后续也没有匹配/settings的路由，最终没有对应组件渲染，因此看不到Settings组件的内容

修复方案 #

调整App.js的路由配置即可：

1. 去掉根路由/的exact属性
2. 将根路由放到所有路由的最后面（Switch组件会优先匹配先命中的路由，把短路径放到最后可以避免拦截其他更长的独立路由）

修改后的App.js代码：

return(
<>
<Switch>
      <Route exact path='/signin' component={Signin} />
      <Route exact path='/logout' component={Logout} />
      <Route path='/' component={Home} /> 
</Switch>
</>)

调整后访问/settings时，App.js会先跳过/signin、/logout路由，命中根路由加载Home组件，Home内部的子路由就可以正常匹配到/settings渲染Settings组件了。

内容的提问来源于stack exchange，提问作者ritik jain