React Router带子路由的/user路径通配符404规则不生效问题

问题原因 #

你当前的/user父路由没有配置index路由，当访问/user或/user/时，父路由的<Outlet/>没有匹配到任何子路由内容，所以返回空白。你配置的子路由path="*"仅会匹配/user/后携带路径段的场景，不会匹配空的子路径。

解决方法 #

给/user父路由新增index子路由，直接指向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/>}>
      {/* 新增index路由，匹配 /user 或 /user/ 的场景 */}
      <Route index element={<UserNotFoundPage/>}/>
      <Route path="*" element={<UserNotFoundPage/>}/>
      <Route path="username" element={<UserProfilePage/>}/>
    </Route>
  </Routes>
</Router>

如果你的需求是访问/user时跳转到指定用户页而非显示404，也可以把index路由的内容替换成<Navigate replace to="/user/默认用户名"/>即可。

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