React Router处理Page not found页面时显示位置异常如何解决

你当前的写法中DashboardLayout没有被Route组件包裹，只要loggedIn为true，无论访问的路径是否匹配后台路由，该布局组件都会优先渲染，之后才会渲染匹配到的路由内容，所以访问不存在的路径时，404页面就会出现在布局下方。

方案一（推荐）：给布局加路由匹配规则 #

仅当访问需要用到后台布局的路径时才渲染DashboardLayout，访问不存在的路径时不会渲染布局，直接展示404页面：

<Switch>
    {loggedIn ?
      <>
        {/* 仅匹配后台路由前缀时渲染布局 */}
        <Route path={["/dashboard", "/my-account"]}>
          <DashboardLayout>
            <Switch>
              <Route path="/dashboard" component={Dashboard} />
              <Route path="/my-account" component={Account} />
            </Switch>
          </DashboardLayout>
        </Route>
        <Route path="/page-not-found" component={PageNotFound} />
        <Redirect from='*' to='/page-not-found' />
      </>
      :
      <PublicRoutes />}
  </Switch>

方案二：通过CSS调整层级 #

如果你需要登录后所有页面都保留DashboardLayout，仅让404浮在布局上方，可以给PageNotFound组件添加如下样式：

.page-not-found {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #fff;
  z-index: 9999;
}

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