Reactjs CreateBrowserRouter将props 传递给父组件以验证权限

What I'm about to do maybe useless. If the community has anyother solutions please present it to me个

我所做的是，如果用户有权访问每条路由，我需要判断它.所以我要做的是，如果用户没有访问路径/页面的权限--通信重定向到仪表板

用户权限定义为数字，您可以在下面的代码中看到

element: <Register requiredPermissions={[2, 3]} />

完整的代码

// import AuthRequired from "@/AuthRequired"
import Dashboard from "@/pages/Admin/Dashboard/Dashboard";
import Login from "@/pages/Admin/Login/Login";
import Home from "@/pages/Home/Home";

import { createBrowserRouter } from "react-router-dom";
import AuthRequired from "./AuthRequired";
import Register from "@/pages/Admin/Register/Register";

export const router = createBrowserRouter([
  {
    path: "/",
    element: <Home />,
  },
  {
    path: "/admin/login",
    element: <Login />,
  },
  {
    element: <AuthRequired requiredPermissions={[]} />,
    children: [
      {
        path: "admin/dashboard",
        element: <Dashboard />,
      },
      {
        path: "admin/dashboard/register",
        element: <Register requiredPermissions={[2, 3]} />,
      },
    ],
  },
]);

我需要的是我需要一些如何将props [2，3]传递给AuthRequired.tsx

/* eslint-disable @typescript-eslint/no-explicit-any */
import { Navigate, Outlet, useLocation } from "react-router-dom";
import { store } from "@/store/store";

interface RequiredPermissionsProps {
  requiredPermissions?: number[]; // Optional array of required permissions
}

function AuthRequired({ requiredPermissions = [] }: RequiredPermissionsProps) {
  const _location = useLocation();

  const {
    auth: { token, user, permissions },
  } = store.getState();

  console.log("requiredPermissions ->", requiredPermissions);

  return (
    <>
      {token && user && permissions && permissions !== "" ? (
        <Outlet />
      ) : (
        <Navigate to="/admin/login" state={{ from: _location }} replace />
      )}
    </>
  );
}

export default AuthRequired;

因此，在AuthRequired.tsx中，我可以判断条件并输出或重定向

你有什么解决办法吗，或者我还有别的办法吗