react-router-dom@6如何配置非法路由拦截与鉴权路由规则

先修正你现有代码的语法问题：les-patisseries/les-classiques对应的Route标签没有自闭合，缺少末尾的/，运行会报错，记得补上。

1. 拦截未定义的非预设路由 #

v6版本处理404逻辑非常简单，在所有路由配置的最末尾加一个path为*的通配路由即可。这个路由匹配优先级最低，只有当前面所有预设路由都没命中时才会触发，你可以在这里渲染自定义404页面，也可以直接重定向到首页。

2. 分类管控公开/受保护路由 #

你已经掌握鉴权路由实现的话，推荐把路由按权限类型抽成配置数组统一渲染，后续新增路由不需要改结构，维护成本很低：

• 首先准备受保护路由的包装组件，逻辑就是判断登录态，未登录跳转登录页，已登录渲染对应页面
• 把路由拆成「公开路由」「受保护路由」两个数组，遍历生成路由节点，受保护路由统一套一层鉴权包装
• 最后放404通配路由

参考代码 #

首先是鉴权包装组件（可以直接替换成你已经写好的逻辑）：

import { Navigate } from 'react-router-dom';

// 受保护路由包装
const ProtectedRoute = ({ children }) => {
  // 替换成你项目实际的登录态判断逻辑，比如从context、Redux、本地存储取认证标识
  const isAuth = !!localStorage.getItem('access_token');
  if (!isAuth) {
    // 未登录跳转注册/登录页，加replace避免登录后点返回又回到登录页
    return <Navigate to="/inscription" replace />;
  }
  return children;
};

然后是路由配置和最终渲染结构：

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

// 公开路由，不需要认证即可访问
const publicRoutes = [
  { path: "/", element: <Accueil /> },
  { path: "notre-histoire", element: <OurHistory /> },
  { path: "notre-savoir-faire", element: <OurExpertise /> },
  { path: "l-actualite", element: <News /> },
  { path: "les-patisseries/les-exclusifs", element: <Exclusifs /> },
  { path: "les-patisseries/les-classiques", element: <Classiques /> },
  { path: "inscription", element: <Registration /> },
];

// 受保护路由，必须登录才能访问，后续新增这类路由直接往数组里加就行
const protectedRoutes = [
  // 示例：{ path: "mon-compte", element: <UserCenter /> }
];

// 404页面组件，自行实现即可
const NotFound = () => <div>页面不存在</div>;

function App() {
  return (
    <BrowserRouter>
      <header className="App-header">
        <Navigation />
      </header>
      <Routes>
        {/* 渲染公开路由 */}
        {publicRoutes.map(route => (
          <Route key={route.path} path={route.path} element={route.element} />
        ))}
        {/* 渲染受保护路由，统一套鉴权逻辑 */}
        {protectedRoutes.map(route => (
          <Route
            key={route.path}
            path={route.path}
            element={<ProtectedRoute>{route.element}</ProtectedRoute>}
          />
        ))}
        {/* 404路由必须放在所有路由的最后 */}
        <Route path="*" element={<NotFound />} />
        {/* 不需要单独404页的话，直接重定向到首页即可：
        <Route path="*" element={<Navigate to="/" replace />} />
        */}
      </Routes>
      <Footer />
    </BrowserRouter>
  );
}

注意：如果你的受保护路由有嵌套子路由，直接把ProtectedRoute套在父路由的element上就行，子路由会自动继承鉴权逻辑，不需要重复包装。

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