React Router Dom错误路径未重定向到指定404页面该如何修复？

React Router v5的<Switch>组件仅会对其直接子元素的<Route>/<PrivateRoute>做路径匹配，你把<DashboardLayout>直接作为<Switch>的子元素，只要访问的路径不匹配/login，<Switch>就会直接渲染<DashboardLayout>，不会继续匹配后面path="*"的404路由。而你访问错误路径时，<DashboardLayout>内部的私有路由没有匹配到路径，children为空，就出现了空的Dashboard布局。

方案1：调整路由结构（推荐，符合路由最佳实践） #

把<DashboardLayout>从Switch直接子级移到私有路由的公共渲染逻辑中，让Switch统一管理所有路径匹配：

<Switch>
  <Route exact path="/login" component={Login} />
  {/* 所有需要鉴权的路由统一包裹 */}
  <Route
    path={["/", "/a", "/b"]}
    render={(props) => {
      const { loading, data } = useSelector((state) => state.login)
      // 未登录直接跳转到登录页，不渲染Dashboard布局
      if (!data?.data?.token && !loading) {
        return <Redirect to='/login' />
      }
      return (
        <DashboardLayout title={title}>
          <Switch>
            <PrivateRoute exact path="/" component={Home}/>
            <PrivateRoute exact path="/a" component={A}/>
            <PrivateRoute exact path="/b" component={B}/>
          </Switch>
        </DashboardLayout>
      )
    }}
  />
  {/* 全局404路由，所有未匹配路径都会走到这里 */}
  <Route path="*" component={Page404} />
</Switch>

方案2：最小改动适配原有结构 #

如果不想修改现有嵌套逻辑，直接在DashboardLayout内部补充一层Switch和私有域404路由即可：

<Switch>
  <Route exact path="/login" component={Login} />
  <DashboardLayout title={title}>
    {/* 内部加一层Switch处理私有路由匹配 */}
    <Switch>
      <PrivateRoute exact path="/" component={Home}/>
      <PrivateRoute exact path="/a" component={A}/>
      <PrivateRoute exact path="/b" component={B}/>
      {/* 私有域内的404匹配，登录用户访问错误路径会带布局显示404 */}
      <Route path="*" component={Page404} />
    </Switch>
  </DashboardLayout>
</Switch>

如果需要未登录用户访问错误路径时不显示Dashboard布局，直接跳登录，只需要给外层的DashboardLayout包裹一层和PrivateRoute一致的鉴权判断即可。

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