react-router嵌套Switch路由跳转后渲染NotFound组件问题求助

1. 根路由配置的 /dash 私有路由添加了exact精确匹配属性：访问/dash/contacts时，App.js 层级的 Switch 遍历路由规则时，/dash/contacts 无法命中精确匹配的/dash路由，会直接匹配到末尾的NotFound组件，Dashboard 组件根本不会被渲染，自然不会触发内部嵌套路由的匹配逻辑。
2. Dashboard 内部的 Switch 路由顺序存在问题：若短路径${path}（即/dash）写在前面且未添加exact属性，Switch 匹配到第一个符合规则的路由就会停止匹配，后面的${path}/contacts路由永远不会被命中。

步骤1：修改根路由配置 #

移除 App.js 中/dash私有路由的exact属性：

// 修改前
<PrivateRoute exact path='/dash' component={Dashboard} />

// 修改后
<PrivateRoute path='/dash' component={Dashboard} />

修改后所有以/dash开头的路径都会先渲染 Dashboard 组件，再执行内部嵌套路由的匹配逻辑。

步骤2：调整Dashboard内部路由规则 #

任选以下一种方案调整即可：

方案A：调整路由顺序，长路径前置 #

<Switch>
    <PrivateRoute path={`${path}/contacts`} component={Contacts} />
    <PrivateRoute exact path={path} component={Chats} />
</Switch>

方案B：给短路径添加exact精确匹配属性 #

<Switch>
    <PrivateRoute exact path={path} component={Chats} />
    <PrivateRoute path={`${path}/contacts`} component={Contacts} />
</Switch>

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