如何为react-router-dom 6.3的PrivateRoute组件添加额外参数？

你之前的写法错误在于把组件props拆成了多个独立参数——React组件仅接收单个props对象作为参数，因此permissions和redirect必须和page一起放在解构的对象中。以下是正确的实现方案：

完整实现代码 #

import { Navigate } from 'react-router-dom';
import { useAppSelector } from '../../../hooks/redux/hooks';

// 定义组件的Props类型（TypeScript）
interface PrivateRouteProps {
  page: JSX.Element;
  permissions?: string[]; // 可选权限数组，默认空数组
  redirect?: string; // 可选重定向路径，默认'/login'
}

const PrivateRoute = ({ page, permissions = [], redirect = '/login' }: PrivateRouteProps) => {
  const { isAuthenticated, userPermissions } = useAppSelector((state) => state.auth);

  // 1. 校验是否已登录
  if (!isAuthenticated) {
    return <Navigate replace to={redirect} />;
  }

  // 2. 若有权限要求，校验用户权限
  if (permissions.length > 0) {
    // 这里假设redux中auth.state包含userPermissions字段（用户拥有的权限数组）
    const hasRequiredPermission = permissions.some(perm => userPermissions.includes(perm));
    if (!hasRequiredPermission) {
      // 无权限时重定向，优先用传入的redirect，否则跳转到无权限页面
      return <Navigate replace to={redirect || '/unauthorized'} />;
    }
  }

  // 所有校验通过，渲染目标页面
  return page;
};

export default PrivateRoute;

正确使用方式 #

完全符合你期望的调用格式：

<Route path='/' element={<PrivateRoute page={<Dashboard/>} permissions={['admin']} redirect='/unauthorized' />} />

关键说明 #

1. Props结构修正：所有组件参数必须包裹在同一个解构对象中，不能拆分多个独立参数
2. 默认值处理：给permissions设默认空数组、redirect设默认'/login'，避免未传参时出现undefined
3. 权限逻辑可定制：如果你的redux中用户权限的存储字段不是userPermissions，可以根据实际结构调整校验逻辑

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