React Router v6跳转后显示NotFound组件问题求助

• 检查嵌套路由的规范写法
  v6彻底弃用了v5的Switch，改用Routes，而且嵌套路由必须通过Outlet渲染子内容，不能直接嵌套Route后就完事。如果你的/app路由组件里没加<Outlet />，子路由tasks根本没法被渲染，直接会 fallback 到NotFound。
  错误写法（残留v5习惯）：

  <Routes>
    <Route path="/app" element={<AppLayout />}>
      <Route path="/app/tasks" element={<Tasks />} />
    </Route>
    <Route path="*" element={<NotFound />} />
  </Routes>
  

  正确写法：

  <Routes>
    <Route path="/app" element={<AppLayout />}>
      {/* 子路由用相对路径，不用重复父级的/app */}
      <Route path="tasks" element={<Tasks />} />
    </Route>
    {/* NotFound必须放在最后 */}
    <Route path="*" element={<NotFound />} />
  </Routes>
  

  同时记得在AppLayout组件里加上<Outlet />，这是v6嵌套路由的核心，没有它子路由内容根本出不来。

• 排查路径的绝对/相对混淆问题
  v6里嵌套路由的path默认是相对路径，如果你硬写绝对路径/app/tasks当子路由，会和父路由/app冲突，导致匹配失败。另外跳转时确认navigate("/app/tasks")的路径有没有拼写错误——比如大小写、多打了斜杠，这些细节很容易触发NotFound。

• 确认NotFound路由的位置
  Routes是按顺序匹配第一个符合条件的路由，所以path="*"的NotFound路由必须放在所有路由的最后。如果它排在/app路由前面，会直接优先匹配到NotFound，正常路由根本轮不上。

• 检查授权逻辑的影响
  授权跳转后，看看有没有路由守卫（比如Navigate组件、自定义权限路由）错误重定向，或者授权逻辑里不小心修改了路径。比如授权后跳成了/app/tasks/（末尾多斜杠），而你的路由是tasks（无斜杠），v6默认严格匹配，这时候就会匹配失败触发NotFound。

• 排查过时API的使用
  v6移除了useRouteMatch的部分用法，改用useMatches或者直接在Route里定义嵌套关系。如果还在沿用v5的路由匹配逻辑，也会导致路由解析失败。

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