如何使用React-Router-Dom分离管理员路由与公共路由？

要实现管理员路由和公共路由的分离，核心思路是用一个权限校验组件包裹管理员专属路由，只有当用户满足管理员权限时才渲染对应的页面，否则跳转至公共页面。下面是具体实现步骤：

1. 创建管理员权限校验组件 #

先写一个AdminProtectedRoute组件，负责校验用户是否为管理员，通过则渲染子路由，否则跳转至首页（或登录页）：

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

// 这里替换成你项目中真实的管理员校验逻辑
// 示例：从localStorage读取用户信息，判断是否为管理员
const checkIsAdmin = () => {
  const currentUser = JSON.parse(localStorage.getItem('currentUser'));
  return currentUser?.role === 'admin' || false;
};

const AdminProtectedRoute = () => {
  const isAdmin = checkIsAdmin();
  
  // 权限通过则渲染子路由，否则跳转至首页
  return isAdmin ? <Outlet /> : <Navigate to="/" replace />;
};

export default AdminProtectedRoute;

2. 修改路由配置，分离公共与管理员路由 #

在你的App.js中，将管理员路由嵌套在AdminProtectedRoute下，和公共路由区分开。另外注意你原代码中elements的拼写错误（应为element），这会导致路由无法正常渲染：

import { createBrowserRouter, RouterProvider } from "react-router-dom";
import HomePage from "./Pages/home";
import Contact from './Pages/contact';
import AboutPage from "./Pages/About";
import RootLayout from "./Pages/Root";
import ErrorPage from "./Pages/error";
import ProductPage from "./Pages/Product";
import ProductDetails from "./Pages/ProductDetails";
// 导入权限校验组件
import AdminProtectedRoute from "./Components/AdminProtectedRoute";
// 导入你的管理员页面（示例）
import AdminDashboard from "./Pages/Admin/Dashboard";
import UserManagement from "./Pages/Admin/UserManagement";

const router = createBrowserRouter([
  {
    path: '/',
    element: <RootLayout />, // 修正拼写错误：elements → element
    errorElement: <ErrorPage />,
    children: [
      // 👇 公共路由：所有用户均可访问
      { path: '/', element: <HomePage /> },
      { path: 'contact', element: <Contact /> },
      { path: 'about', element: <AboutPage /> },
      { path: 'product', element: <ProductPage /> },
      { path: 'product/:productId', element: <ProductDetails /> },

      // 👇 管理员专属路由：需通过权限校验
      {
        path: 'admin',
        element: <AdminProtectedRoute />,
        children: [
          { path: '', element: <AdminDashboard /> }, // 对应路径 /admin
          { path: 'users', element: <UserManagement /> }, // 对应路径 /admin/users
          // 可以继续添加更多管理员页面路由
        ]
      }
    ],
  },
]);

function App() {
  return (
    <RouterProvider router={router} />
  );
}

export default App;

额外说明 #

• 权限逻辑优化：实际项目中，建议用Context API或Redux管理全局用户状态，不要直接依赖localStorage（避免篡改），校验逻辑也可以结合后端接口进行权限验证。
• 跳转自定义：如果需要引导未授权用户登录，只需将Navigate的to属性改为"/login"即可。
• 加载状态：可以给AdminProtectedRoute添加加载状态（比如正在请求用户权限时显示Spinner），提升用户体验。

内容的提问来源于stack exchange，提问作者Ashmit-Kumar