react子路由如何匹配404页面

在React中实现子路由404匹配

使用React Router v6实现子路由的404页面匹配，可以通过<Route path="*">或<Route>的未匹配兜底特性完成。

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

function App() {
  return (
    <Routes>
      <Route path="/parent" element={<ParentLayout />}>
        <Route index element={<ParentHome />} />
        <Route path="child1" element={<Child1 />} />
        <Route path="child2" element={<Child2 />} />
        <Route path="*" element={<NotFound />} />
      </Route>
    </Routes>
  );
}

嵌套路由的404处理方案

当需要为多级嵌套路由单独设置404页面时，可以在每个路由层级末尾添加通配符路由：

<Routes>
  <Route path="/dashboard" element={<DashboardLayout />}>
    <Route index element={<DashboardHome />} />
    <Route path="settings" element={<Settings />} />
    <Route path="*" element={<DashboardNotFound />} />
  </Route>
  <Route path="*" element={<GlobalNotFound />} />
</Routes>

动态路由的404捕获

对于动态参数路由，通配符路由需要放在最后声明：

<Route path="/products" element={<ProductLayout />}>
  <Route path=":id" element={<ProductDetail />} />
  <Route path="category/:type" element={<CategoryPage />} />
  <Route path="*" element={<ProductNotFound />} />
</Route>

注意要点

• 通配符路由path="*"必须放在同级路由的最后
• 不同层级的404组件可以差异化设计
• 在v6版本中，<Switch>已被<Routes>取代
• 404组件可以通过useNavigate钩子实现自动重定向逻辑