React Router 6 404通配路由无法匹配嵌套路由问题

你遗漏了React Router 6嵌套路由的必填配置：所有存在子路由的父级路由组件，必须渲染<Outlet />组件，子路由对应的内容才能被正常挂载渲染。
你遇到的空白问题本质原因：

• 第一种外层单独放path="*"路由的写法，仅能匹配根层级完全无匹配的路径（比如/foo）。访问/dashboard/foo时，路由首先会命中path为dashboard的父路由，剩余的子路径foo在当前路由的子项中找不到匹配规则，而父组件没有预留Outlet渲染位，自然不会输出任何内容，显示空白。
• 第二种在各层级嵌套路由下都加*通配规则的写法逻辑是对的，但如果你的Layout、Dashboard这类父组件内部没有渲染<Outlet />，作为子路由的NotFound组件根本没有挂载位置，依然会显示空白。

第一步：给所有父级路由组件添加Outlet #

所有需要承载子路由的组件，都要从react-router-dom中引入Outlet组件，放在你希望子路由内容渲染的位置：

// Layout组件示例
import { Outlet } from 'react-router-dom';

const Layout = () => {
  return (
    <div className="app-layout">
      {/* 公共布局内容：导航、侧边栏等 */}
      <AppHeader />
      <AppSidebar />
      {/* 子路由内容渲染出口，必须添加 */}
      <div className="app-content">
        <Outlet />
      </div>
    </div>
  );
};

如果你的Dashboard组件下也挂载子路由（包括通配路由），也需要在组件内添加Outlet：

// Dashboard组件示例
import { Outlet } from 'react-router-dom';

const Dashboard = () => {
  return (
    <div className="dashboard-page">
      <DashboardNav />
      {/* 子路由渲染出口 */}
      <Outlet />
    </div>
  );
};

第二步：简化路由配置 #

不需要在每个嵌套层级都重复写NotFound路由，只需要在根路由的子路由列表最末尾添加path="*"的通配规则即可，通配路由必须放在同层级所有路由的最后，避免提前拦截正常路由匹配：

<Routes>
  <Route path="/" element={<Layout />}>
    <Route index element={<Root />} />
    <Route path="dashboard" element={<Dashboard />} />
    {/* 通配路由放在同层级最后，匹配所有未命中的路径 */}
    <Route path="*" element={<NotFound />} />
  </Route>
</Routes>

配置完成后，所有无匹配路径（不管是根层级还是嵌套层级）都会命中通配规则，在Layout的Outlet位置渲染统一的NotFound页面，不会再出现空白问题。
如果你希望某一级嵌套路由下的无匹配页面保留当前父路由的布局（比如访问/dashboard/foo时保留Dashboard的导航栏），只需要把*通配路由挪到对应父路由的子路由列表最后即可，前提依然是父组件必须渲染Outlet。

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