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

【问题标题】：404 page on Route not working as expected with childrenRoute 上的 404 页面无法按预期与孩子一起工作
【发布时间】：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>
  )
}

【问题讨论】：

标签： javascript reactjs jsx react-router-dom

【解决方案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>

【讨论】：