React-Router v6路由保护实现报错求助

错误原因分析 #

• 第一个报错：React-Router v6 强制要求<Routes>的直接子节点必须是官方<Route>组件，自定义的<ProtectedRoute>不能直接嵌套在<Routes>下，这是框架的核心规则。
• 第二个路由不匹配问题：修改后路由未生效，大概率是因为没有按照v6的规范将受保护路由与ProtectedRoute正确关联，导致路径匹配失败。

正确实现步骤 #

1. 编写符合v6规范的ProtectedRoute组件 #

这个组件是一个路由内容的包装器，负责校验用户权限，通过则渲染目标内容，未通过则重定向到登录页。有两种常用写法：

写法一：适配嵌套路由（推荐多受保护路由场景）

用<Outlet>渲染嵌套的子路由，适合批量保护一组路由：

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

const ProtectedRoute = ({ isAuthenticated }) => {
  // 未登录则跳转到登录页
  if (!isAuthenticated) {
    return <Navigate to="/login" replace />;
  }
  // 已登录则渲染受保护的子路由内容
  return <Outlet />;
};

export default ProtectedRoute;

写法二：适配单个路由（适合少量受保护路由）

直接接收要渲染的组件，针对性保护单个路由：

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

const ProtectedRoute = ({ isAuthenticated, element }) => {
  return isAuthenticated ? element : <Navigate to="/login" replace />;
};

export default ProtectedRoute;

2. 在App.js中配置路由 #

所有路由必须放在<Route>组件下，通过element属性关联ProtectedRoute：

方案一：嵌套路由批量保护（推荐）

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import ProtectedRoute from './ProtectedRoute';
import Login from './Login';
import SavePassword from './SavePassword';
import GetPassword from './GetPassword';

function App() {
  // 实际项目中从localStorage、状态管理工具或接口获取登录状态
  const isAuthenticated = localStorage.getItem('token') ? true : false;

  return (
    <Router>
      <Routes>
        {/* 公开路由：登录页 */}
        <Route path="/login" element={<Login />} />
        
        {/* 受保护路由的父容器，所有子路由都会被权限校验 */}
        <Route element={<ProtectedRoute isAuthenticated={isAuthenticated} />}>
          <Route path="/savePassword" element={<SavePassword />} />
          <Route path="/getPassword" element={<GetPassword />} />
          {/* 可在此添加更多受保护路由 */}
        </Route>

        {/* 404路由：匹配所有未定义的路径 */}
        <Route path="*" element={<Navigate to="/login" replace />} />
      </Routes>
    </Router>
  );
}

export default App;

方案二：单个路由单独保护

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import ProtectedRoute from './ProtectedRoute';
import Login from './Login';
import SavePassword from './SavePassword';
import GetPassword from './GetPassword';

function App() {
  const isAuthenticated = localStorage.getItem('token') ? true : false;

  return (
    <Router>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route 
          path="/savePassword" 
          element={<ProtectedRoute isAuthenticated={isAuthenticated} element={<SavePassword />} />} 
        />
        <Route 
          path="/getPassword" 
          element={<ProtectedRoute isAuthenticated={isAuthenticated} element={<GetPassword />} />} 
        />
        <Route path="*" element={<Navigate to="/login" replace />} />
      </Routes>
    </Router>
  );
}

export default App;

关键注意事项 #

• 登录状态要动态获取：不要硬编码isAuthenticated，实际项目中可以从localStorage读取token、用useState管理登录状态，或者通过Redux等工具维护全局状态。
• 路径匹配要精确：v6默认是精确匹配，确保访问的路径和配置的path完全一致（比如不要多写或少写斜杠）。
• 用replace优化跳转：<Navigate>的replace属性会替换浏览器历史记录，避免用户点击后退回到登录页。

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