React Router v5嵌套路由后动态公共路由无法访问问题

React Router v5的<Switch>组件遵循从上到下顺序匹配、命中即终止的规则。你代码中无exact属性的<Route path="/">属于前缀匹配，所有以/开头的前端路由（也就是项目里几乎所有路由）都会先命中这条规则，外层<Switch>直接终止遍历，根本不会执行到后面声明的/:id动态路由，哪怕你在这个/路由内部嵌套了子<Switch>，外层的匹配流程已经结束，外层后续的路由永远不会被渲染。

不要用无exact属性的根路径路由作为私有路由的包裹容器，两种可直接落地的写法如下：

方案1：拆分层级路由，按优先级排序（推荐） #

把所有静态路由、私有路由直接放在根<Switch>下，所有明确路径的路由开启精确匹配，动态路由放在最后兜底，修正后的代码参考：

<BrowserRouter>
  <PostProvider>
    <Layout>
      <Switch>
        {/* 公共静态路由 开启精确匹配 */}
        <Route exact path="/home">
          <Home />
        </Route>
        <Route exact path="/forgot-password">
          <ForgetPwd />
        </Route>
        <Route exact path="/verifyEmail">
          <EmailVarification />
        </Route>
        <Route exact path="/recover-password">
          <Recoverpassword />
        </Route>

        {/* 私有路由 直接声明路径 无需外层包裹父Route */}
        <PrivateRoutes exact path="/dashboard">
          <Dashboard />
        </PrivateRoutes>
        <PrivateRoutes exact path="/about">
          <About />
        </PrivateRoutes>

        {/* 动态公共路由 最后兜底匹配 */}
        <Route path="/:id?">
          <Publicpage />
        </Route>
      </Switch>
    </Layout>
  </PostProvider>
</BrowserRouter>

注意点：

• 所有带明确固定路径的路由必须加exact属性，避免前缀匹配拦截其他路径
• 私有路由组件本身就可以接收path参数做登录态校验，不需要额外套一层父级Route容器
• 如果你保留动态路由的可选参数/:id?，它会匹配根路径/，如果需要根路径展示特定页面，在动态路由前面加一条exact path="/"的路由指向对应页面即可

方案2：给动态路由增加明确前缀（适合不想调整现有私有路由结构的场景） #

如果要保留原有嵌套私有路由的写法，就不要让动态路由和私有路由同处根路径层级，给动态公共路由加固定前缀做路径区分，比如把动态路由路径改为/page/:id，从根本上避免和根路径下的其他路由产生匹配冲突。这种写法不需要大改现有路由结构，只需要调整动态路由的path即可，注意同步修改所有跳转到动态公共页的链接路径。

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