如何在react-router-dom V5中配置嵌套路由场景下的404页面？

问题原因 #

当访问/admin/wtwtwtw时，外层路由中path="/admin"的Route会前缀匹配该路径（React Router v5默认是部分匹配，无需完全一致），因此直接渲染Panel组件，不会触发外层的NotFound路由。而Panel内部的嵌套路由未处理该无效路径，导致无法显示404页面。

解决步骤 #

1. 保留外层路由结构（无需修改） #

外层的HashRouter和Switch保持原样，注意/admin的Route不要添加exact属性，否则会阻断嵌套路由的匹配：

<HashRouter>
  <Switch>
    <Route path="/form" component={Login} />
    <Route path="/admin" component={Panel} />
    <Route path="/changepass" component={ChangePass} />
    <Route path="*" component={NotFound} />
  </Switch>
</HashRouter>

2. 在Panel组件中添加嵌套路由的404处理 #

在Panel组件内部，用Switch渲染嵌套路由，并在最后追加匹配所有路径的Route来渲染NotFound组件：

import { Switch, Route } from 'react-router-dom';

const Panel = () => {
  return (
    <div className="panel-layout">
      {/* 保留Panel的侧边栏、导航栏等布局元素 */}
      <Switch>
        {/* 遍历生成合法嵌套路由 */}
        {dashboardRoutes.map((route, index) => (
          <Route
            key={index}
            path={`${route.layout}${route.path}`}
            component={route.component}
            exact // 确保嵌套路由精确匹配
          />
        ))}
        {/* 拦截/admin下所有无效路径 */}
        <Route path="*" component={NotFound} />
      </Switch>
    </div>
  );
};

关键说明 #

• 嵌套路由的path需拼接layout和path字段，生成完整路径（如/admin/dashboard），保证匹配准确。
• 给嵌套Route加exact属性，避免子路由间的前缀匹配冲突（比如/dashboard和/dashboard/detail这类场景）。
• 嵌套Switch末尾的path="*"路由，会匹配所有未被前面路由命中的/admin/xxx路径，从而触发NotFound组件。

处理后效果：

• 访问/akfakafk触发外层NotFound
• 访问/admin/wtwtwtw触发Panel内部NotFound
• 合法嵌套路由（如/admin/dashboard）正常渲染对应组件

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