React JS中创建Admin专属私有路由：解决无限重定向与空白页问题

数据老陈

2026-8-1

私有路由权限控制优化及无限重定向问题修复

问题根源

你的代码出现Maximum update depth exceeded错误是因为无限重定向循环：

当admin用户访问/bill时，PrivateRoute组件会返回<Navigate to="/bill"/>，触发路由跳转
跳转后又会重新渲染/bill路由对应的PrivateRoute，再次执行跳转逻辑，形成死循环
同时，当前PrivateRoute完全没有渲染传入的Bill组件，导致有权限用户也看不到页面内容

优化方案

私有路由的核心逻辑应该是权限验证通过则渲染目标组件，不通过则跳转至授权页，而非直接跳转到目标路由。

修改后的`Privateroute.js`

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

const PrivateRoute = ({ children }) => {
  const userRole = localStorage.getItem("role");
  
  // 验证权限：admin角色渲染目标组件，否则跳转至授权页
  if (userRole === "admin") {
    return children;
  } else {
    return <Navigate to="/" replace />;
  }
};

export default PrivateRoute;

修改后的`App.js`路由配置

移除无效的role属性，确保路由结构正确：

import Bill from './bill'
import WithNav from './dashboard'
import PrivateRoute from './Privateroute'
import { Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Routes>
      <Route element={<WithNav />}>
        {/* 使用PrivateRoute包裹Bill，实现权限控制 */}
        <Route path="/bill" element={<PrivateRoute><Bill /></PrivateRoute>} />
      </Route>
      {/* 其他路由... */}
    </Routes>
  );
}

export default App;