React Router v6：已定义路由子路径不存在时如何渲染NotFound组件？

问题原因 #

1. React Router v6 默认采用精确匹配规则，当你定义了/signup这类路由时，/signup/something不会匹配该路由；若未配置兜底的通配符路由，就没有组件渲染，导致空白页。
2. 若未给父路由配置嵌套路由的兜底规则，或父组件未添加<Outlet />承载子路由内容，子路径请求也无法触发NotFound组件。

解决方法 #

方法1：全局兜底（所有未匹配路径统一显示NotFound） #

在路由配置的最末尾添加使用*通配符的路由，确保所有未匹配的路径都会命中：

// App.jsx 示例代码
import { Routes, Route } from 'react-router-dom';
import Signup from './Signup';
import NotFound from './NotFound';

function App() {
  return (
    <Routes>
      <Route path="/signup" element={<Signup />} />
      {/* 其他业务路由 */}
      {/* 全局兜底路由，必须放在最后 */}
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
}

注意：path="*"必须放在所有路由的最后，因为React Router按顺序匹配，前面的路由匹配成功后就不会继续向后查找。

方法2：特定路由的子路径兜底（仅/signup/*类路径触发NotFound） #

如果只想让/signup的未定义子路径显示NotFound，有两种实现方式：

方式A：嵌套路由（保留父组件内容）

修改Signup组件添加<Outlet />，用于渲染子路由内容，再给父路由配置嵌套的兜底路由：

// Signup.jsx
import { Outlet } from 'react-router-dom';

function Signup() {
  return (
    <div>
      <h1>注册页面</h1>
      {/* 子路由组件会渲染在此处 */}
      <Outlet />
    </div>
  );
}

// App.jsx
import { Routes, Route } from 'react-router-dom';
import Signup from './Signup';
import NotFound from './NotFound';

function App() {
  return (
    <Routes>
      <Route path="/signup" element={<Signup />}>
        {/* /signup下的所有未定义子路径触发NotFound */}
        <Route path="*" element={<NotFound />} />
      </Route>
      {/* 其他业务路由 */}
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
}

这种方式下，访问/signup/something时，会先渲染Signup的内容，再在<Outlet />位置显示NotFound组件。

方式B：独立路由（直接显示NotFound）

无需修改父组件，直接添加针对/signup/*的路由：

// App.jsx
import { Routes, Route } from 'react-router-dom';
import Signup from './Signup';
import NotFound from './NotFound';

function App() {
  return (
    <Routes>
      <Route path="/signup" element={<Signup />} />
      {/* 匹配所有/signup开头的子路径 */}
      <Route path="/signup/*" element={<NotFound />} />
      {/* 其他业务路由 */}
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
}

访问/signup/something时会直接渲染NotFound组件，不显示Signup的内容。

额外注意事项 #

• 确保所有路由配置都被<BrowserRouter>（或其他Router组件）包裹，否则路由功能不会生效。
• 若部署或刷新子路径出现404，需配置服务端和打包工具的路由 fallback：
  • Webpack DevServer 添加historyApiFallback: true
  • 后端服务（如server.js）需将所有请求重定向到index.html

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