如何向 const PrivateRoute function 添加额外参数

Question

我有这个简单的 PrivateRoute 设置，我希望使用 react-router-dom 6.3 进行扩展

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

const PrivateRoute = ({ page }: { page: JSX.Element}) => {
  const { isAuthenticated } = useAppSelector((state) => state.auth);
  return isAuthenticated ? page : <Navigate replace to='/login' />
}
export default PrivateRoute

使用如下：

<Route path='/' element={<PrivateRoute page={<Dashboard/>} />} />

我想要添加两个新参数：作为字符串数组的“权限”参数并将“重定向”参数指定为可为空的字符串。

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

我尝试了以下方法：

const PrivateRoute = ({ page }: { page: JSX.Element}, permissions: string[], redirect?: string) => {
}

它没有出错，但我也无法像在倒数第二个示例中那样添加两个新参数。

我怎样才能做到这一点？

Answer 1

React 组件最多需要一个 props object 作为参数。 您需要向此参数添加其他道具和类型。

interface PrivateRouteProps {
  page: JSX.Element;
  permissions: string[];
  redirect?: string;
}

const PrivateRoute = ({ page, permissions = [], redirect }: PrivateRouteProps) => {
  ...
}

我认为您在进行路由保护时有点不正确。 更成熟的模式是创建一个布局路由来处理检查身份验证状态并呈现嵌套路由的Outlet组件或Navigate组件以进行重定向。

例子：

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

interface PrivateRouteProps {
  permissions: string[];
  redirect?: string;
}

const PrivateRoutes = ({ permissions = [], redirect = "/" }: PrivateRouteProps) => {
  const location = useLocation();

  ...

  if (checkingPermission) {
    return null; // or loading indicator/spinner/etc
  }

  return hasPermission 
    ? <Outlet />
    : <Navigate to={redirect} replace state={{ from: location }} />;
}

...

<Routes>
  <Route element={<PrivateRoute permissions={['admin']} redirect='/login' />}>
    <Route path='/' element={<Dashboard />} />
    ... other protected routes by role
  </Route>

  ... other unprotected routes
</Routes>