Route 上的 404 页面无法按预期与孩子一起工作

Posted 2023-02-22

【中文标题】Route 上的 404 页面无法按预期与孩子一起工作

【英文标题】：404 page on Route not working as expected with children

【发布时间】：2022-01-05 11:16:52

【问题描述】：

我有一个有两个孩子的用户路线。 我在 url 与用户不匹配的情况下使用了path="*"，以便它返回 UserNotFoundPage。

问题是，虽然当 url 为 .../user/someIncorrectUsername 时它确实给了我 UserNotFoundPage ，但如果我只输入 .../user/ 或 .../user ，它会给我一个空页面。虽然我本以为它会让我进入 UserNotFoundPage。

我怎样才能得到这种行为？

这是我的代码：

<Router>
  <Routes>
    /* PUBLIC */
    <Route path="*" element=<Navigate replace to="/welcome"/>/>
    <Route path="/welcome" element=<HomePage/>/>
    <Route path="/dashboard" element=<DashboardPage/>/>
    /* RESTRICTED */
    <Route path="/login" element=<LoginPage/>/>
    /* PRIVATE */
    <Route path="/user" element=<Users/>>
      <Route path="*" element=<UserNotFoundPage/>/>
      <Route path="username" element=<UserProfilePage/>>
    </Route>
    </Route>
  </Routes>
</Router>

function useAuth() 
  return true;


function HomePage() 
  return (
    <div>
      <h1>HOME PAGE</h1>
    </div>
  )


function UserNotFoundPage() 
  return (
    <div>
      <p>User not found</p>
    </div>
  )


function Users() 
  const auth = useAuth();
  return auth ? <Outlet/> : <Navigate to="/login"/>;


function UserProfilePage() 
  return (
    <div>
      <h4>USER PROFILE PAGE</h4>
    </div>
  )


function LoginPage() 
  return (
    <div>
      <h2>
        Login page
      </h2>
    </div>
  )

【参考方案1】：

这里的问题是抽象的“/user”也代表了一个可以通过Outlet匹配和渲染的路由路径，但是在完全匹配匹配的“ /user”路径。

应该在父路由元素中使用<Outlet> 来呈现它们的 子路由元素。这允许嵌套的 UI 在孩子时显示 路线被渲染。 如果父路由完全匹配，它将 渲染子索引路由如果没有索引路由，则不渲染任何内容。

您可以指定UserNotFoundPage 路由以成为在“/user”以及任何不匹配的“/user/”上匹配和呈现的路由*" 路径，将其指定为索引路由。

<Route path="/user" element=<Users/>>
  <Route index path="*" element=<UserNotFoundPage/>/>
  <Route path="username" element=<UserProfilePage/>>
</Route>