React Router 6后代路由下实现无父上下文依赖的独立404页面

问题本质 #

React Router v6 采用就近匹配规则，只要路径命中了父级路由的前缀（如feature1/*），后续匹配逻辑就会完全交给对应组件内部的嵌套<Routes>处理，子路由匹配失败时不会冒泡回上层查找通配符，这就是根级定义的*路由在嵌套场景下不生效的核心原因。

可落地方案 #

根据项目的路由组织形式二选一即可，两种方案都不会修改当前访问URL，不需要重定向到/404路径。

方案1：适配子模块独立维护路由的分散式场景 #

如果项目是各业务模块单独在组件内维护自身路由、自带模块布局，按以下规则改动即可：

• 先封装统一的全局404组件GlobalNotFound，组件内部自带需要的独立404布局（如全屏提示、返回操作按钮等），不依赖任何业务模块的布局容器。
• 对每一层独立维护的<Routes>做两处调整：
  • 把所有需要套用当前模块布局的业务路由，统一放到布局组件对应的路由下
  • 在当前<Routes>的路由列表末尾，加一个path="*"的平级路由，直接指向GlobalNotFound组件

以给出的Feature1模块为例，改造后代码如下：

import { GlobalNotFound } from '@/components/GlobalNotFound';

function Feature1 () {
  return (
    <Routes>
      {/* 所有业务路由嵌套在布局路由下，自动套用FeatureLayout */}
      <Route element={<FeatureLayout />}>
        <Route path="/" element={<Home />} />
        <Route path="foo" element={<Foo />} />
        <Route path="bar" element={<Bar />} />
      </Route>
      {/* 通配路由和布局路由平级，命中时直接渲染独立布局的404，不套用模块布局 */}
      <Route path="*" element={<GlobalNotFound />} />
    </Routes>
  );
}

// Feature2做和Feature1完全一致的改造即可
function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="dashboard" element={<Dashboard />} />
      <Route path="feature1/*" element={<Feature1 />} />
      <Route path="feature2/*" element={<Feature2 />} />
      {/* 根路由末尾同样加通配符，覆盖根路径下的不匹配场景 */}
      <Route path="*" element={<GlobalNotFound />} />
    </Routes>
  );
}

该方案改动量极小，不需要调整现有模块独立维护路由的架构，不管嵌套多少层路由，只要当前层没有匹配到对应路径，就会直接渲染统一的独立布局404，URL保持原始访问路径不变。

方案2：适配路由集中管理的场景 #

如果项目采用useRoutes做集中式路由配置，实现更简单，只需要把通配符路由放在整个路由配置的最末尾，和所有一级路由平级即可，不需要在子模块单独加通配规则。React Router会自动遍历全量嵌套路由树，只有所有层级的路由都未匹配时，才会命中这个全局通配符，渲染自带独立布局的404组件。
示例配置：

const routeConfig = [
  { path: '/', element: <Home /> },
  { path: 'dashboard', element: <Dashboard /> },
  {
    path: 'feature1',
    element: <FeatureLayout />,
    children: [
      { index: true, element: <Home /> },
      { path: 'foo', element: <Foo /> },
      { path: 'bar', element: <Bar /> },
    ]
  },
  {
    path: 'feature2',
    element: <FeatureLayout />,
    children: [
      { index: true, element: <Home /> },
      { path: 'foo', element: <Foo /> },
      { path: 'bar', element: <Bar /> },
    ]
  },
  // 全局通配路由放在配置最末尾，和一级路由平级，自带独立布局
  { path: '*', element: <GlobalNotFound /> }
];

function App() {
  const routes = useRoutes(routeConfig);
  return routes;
}

注意事项 #

• 不要把*通配路由放在任何业务布局路由的children内部，否则404组件会被嵌套在业务布局里，达不到独立布局的要求
• 分散式路由场景下，每一层独立的<Routes>都必须在末尾加平级的*路由指向统一404组件，否则该层路由匹配失败时会渲染空白

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