react-router-dom 如何分离不同模板的主/侧页面路由

React Router v5的<Switch>组件按代码书写顺序从上到下匹配路由，只要当前URL满足路径前缀匹配规则就会命中，停止后续匹配。
你当前把根路径/对应的MainPages路由放在了最前面，所有路径（包括/account开头的验证页路径）都满足/的前缀匹配规则，所以所有请求都会直接命中MainPages，根本走不到后面的AccountVerificationPages路由。
另外MainPages内部的<Switch>末尾写了通配符*的404路由，进入MainPages的/account类路径匹配不到内部路由，就会直接显示带头部侧边栏的404页面，不符合预期。

核心修改：调整顶层路由匹配顺序 #

把路径更具体、匹配范围更小的/account路由挪到根路径/路由的前面，保证/account开头的路径优先命中验证页模板，其余路径再命中主布局模板。
修正后的顶层路由代码：

<Switch>
  {/* 优先匹配账户验证类页面，所有/account开头的路径都走无侧边栏、无头部模板 */}
  <Route path="/account" component={AccountVerificationPages} />
  {/* 其余路径走带侧边栏、头部的主布局模板 */}
  <Route path="/" component={MainPages} />
  <Route path="*">
    <div>404</div>
  </Route>
</Switch>

额外优化：修复子路由路径拼接隐患 #

你当前MainPages里的browse路由拼接逻辑有问题，当根路径不是/时会生成错误路径，建议调整为更稳妥的写法：

// 原错误写法：<Route path={`${path}browse`} exact>
// 修改为直接写绝对路径，避免拼接错误
<Route path="/browse" exact>
  <Suspense fallback={<PageLoading />}>
    <IndentedTemplate>
      <MainPage />
    </IndentedTemplate>
  </Suspense>
</Route>

修改后路由命中逻辑完全符合需求：

• 访问/、/browse等非/account开头的路径：命中MainPages，渲染带头部、侧边栏的主布局
• 访问/account/reset-password/:token、/account/verify/:token等验证页路径：优先命中AccountVerificationPages，渲染无头部、侧边栏的全屏验证模板
• 两类路径下的不存在地址，会分别命中各自布局内部的404规则，展示对应布局下的404页面

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