React Router v6.2.2 后台管理页面私有路由创建报错求助

错误原因 #

你的报错源于react-router-dom v6的核心规则：<Route>组件只能作为<Routes>的直接子元素使用，不能在自定义组件中直接渲染。而你原有的PrivateRouter组件直接返回了<Route>，违反了这一规则，导致报错。

正确实现方式 #

react-router-dom v6彻底改变了私有路由的实现逻辑，不再需要用<Route>封装权限判断，而是要做一个认证守卫组件，直接根据权限返回目标内容或重定向。

重构PrivateRouter组件 #

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

const PrivateRouter = ({ children }) => {
  const token = window.localStorage.getItem("userInfo");
  
  // 已登录则返回受保护的组件
  if (token) {
    return children;
  } 
  // 未登录则重定向到登录页
  else {
    return <Navigate to="/login" replace />;
  }
};

export default PrivateRouter;

修改App.js中的用法 #

保持原有路由结构不变，直接用PrivateRouter包裹需要保护的组件即可：

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import PrivateRouter from './PrivateRouter';
import Dashboard from './Dashboard';
import Login from './Login';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        {/* 公开登录路由 */}
        <Route path="/login" element={<Login />} />
        {/* 受保护的管理员仪表盘路由 */}
        <Route 
          path="/admin/dashboard" 
          element={
            <PrivateRouter>
              <Dashboard />
            </PrivateRouter>
          } 
        />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

进阶：增加管理员权限校验 #

如果需要验证用户是否为管理员（而非仅登录状态），可以解析localStorage中的用户信息（假设是JSON格式字符串），判断角色权限：

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

const PrivateRouter = ({ children }) => {
  const userInfoStr = window.localStorage.getItem("userInfo");
  
  if (userInfoStr) {
    const userInfo = JSON.parse(userInfoStr);
    // 假设userInfo中包含role字段，值为'admin'表示管理员
    if (userInfo.role === 'admin') {
      return children;
    } 
    // 非管理员重定向到无权限页面
    else {
      return <Navigate to="/unauthorized" replace />;
    }
  } 
  // 未登录重定向到登录页
  else {
    return <Navigate to="/login" replace />;
  }
};

export default PrivateRouter;

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