如何在React Router中基于用户角色实现动态路由

1. 统一路径，动态渲染对应角色组件 #

如果你的核心需求是同一路径根据角色展示不同页面，可以直接在路由元素里根据角色动态匹配组件，无需跳转到不同路径，更贴合“同路径”的设计目标：

const App = () => {
  const userRole = useSelector(state => state.auth.role); // 实际从Redux获取角色

  // 映射角色到对应页面组件
  const RoleComponentMap = {
    admin: AdminDashboard,
    agent: UserDashboard,
    default: NotFound // 兜底的默认组件
  };

  const CurrentComponent = RoleComponentMap[userRole] || RoleComponentMap.default;

  return (
    <ThemeProvider theme={theme}>
      <Routes>
        <Route path="/" element={<FullLayout />}>
          {/* 根路径直接渲染当前角色对应的首页 */}
          <Route path="/" element={<CurrentComponent />} />
          <Route path="/login" element={<Login />} />
          {/* 也可设置统一的dashboard路径，不同角色看到不同内容 */}
          <Route path="/dashboard" element={<CurrentComponent />} />
        </Route>
      </Routes>
    </ThemeProvider>
  );
};

2. 封装角色路由组件，复用权限逻辑 #

如果需要在多个路由上复用角色校验逻辑，可以抽离出自定义路由组件，让路由结构更简洁：

// 支持单角色校验的路由组件
const RoleRoute = ({ role, element, fallbackElement = <Navigate to="/login" replace /> }) => {
  const userRole = useSelector(state => state.auth.role);
  return userRole === role ? element : fallbackElement;
};

// 支持多角色的扩展版本
const MultiRoleRoute = ({ allowedRoles, element, fallbackElement = <Navigate to="/login" replace /> }) => {
  const userRole = useSelector(state => state.auth.role);
  return allowedRoles.includes(userRole) ? element : fallbackElement;
};

// 使用示例
const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <Routes>
        <Route path="/" element={<FullLayout />}>
          <Route path="/" element={<Navigate to="/dashboard" replace />} />
          <Route path="/login" element={<Login />} />
          {/* 仅admin可访问的路由 */}
          <Route path="/admin" element={<RoleRoute role="admin" element={<AdminDashboard />} />} />
          {/* agent和editor都能访问的路由 */}
          <Route path="/user" element={<MultiRoleRoute allowedRoles={["agent", "editor"]} element={<UserDashboard />} />} />
        </Route>
      </Routes>
    </ThemeProvider>
  );
};

3. 结合路由守卫处理未授权访问 #

针对现有方案中用户直接访问/admin但角色不符的问题，添加权限守卫逻辑，确保只有对应角色能进入目标页面：

// 封装权限守卫组件
const ProtectedRoute = ({ allowedRoles, element }) => {
  const userRole = useSelector(state => state.auth.role);
  const isAuthenticated = useSelector(state => state.auth.isAuthenticated);

  if (!isAuthenticated) {
    return <Navigate to="/login" replace />;
  }

  if (!allowedRoles.includes(userRole)) {
    // 角色不匹配时，跳转到首页或无权限页面
    return <Navigate to="/" replace />;
  }

  return element;
};

// 使用示例
const App = () => {
  const roleRedirect = { admin: "/admin", agent: "/user" };
  const userRole = useSelector(state => state.auth.role);

  return (
    <ThemeProvider theme={theme}>
      <Routes>
        <Route path="/" element={<FullLayout />}>
          <Route path="/" element={
            <ProtectedRoute allowedRoles={["admin", "agent"]} element={
              <Navigate to={roleRedirect[userRole]} replace />
            } />
          } />
          <Route path="/login" element={<Login />} />
          <Route path="/admin" element={<ProtectedRoute allowedRoles={["admin"]} element={<AdminDashboard />} />} />
          <Route path="/user" element={<ProtectedRoute allowedRoles={["agent"]} element={<UserDashboard />} />} />
        </Route>
      </Routes>
    </ThemeProvider>
  );
};

4. 简化现有重定向逻辑 #

如果想保留“根路径跳转到角色专属路径”的逻辑，可以把重定向逻辑封装成独立组件，让路由结构更清晰：

const RoleRedirect = () => {
  const userRole = useSelector(state => state.auth.role);
  const roleRedirect = { admin: "/admin", agent: "/user" };
  const redirectPath = roleRedirect[userRole] || "/login";

  return <Navigate to={redirectPath} replace />;
};

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <Routes>
        <Route path="/" element={<FullLayout />}>
          <Route path="/" element={<RoleRedirect />} />
          <Route path="/login" element={<Login />} />
          <Route path="/admin" element={<ProtectedRoute allowedRoles={["admin"]} element={<AdminDashboard />} />} />
          <Route path="/user" element={<ProtectedRoute allowedRoles={["agent"]} element={<UserDashboard />} />} />
        </Route>
      </Routes>
    </ThemeProvider>
  );
};

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