通过react-router-dom6的loader实现菜单权限和登录拦截。

react-router-dom中route介绍：

const router = createBrowserRouter([{// it renders this elementelement: ,// when the URL matches this segmentpath: "teams/:teamId",// with this data loaded before renderingloader: async ({ request, params }) => {return fetch(`/fake/api/teams/${params.teamId}.json`,{ signal: request.signal });},// performing this mutation when data is submitted to itaction: async ({ request }) => {return updateFakeTeam(await request.formData());},// and renders this element in case something went wrongerrorElement: ,},
]);//或组件版
const router = createBrowserRouter(createRoutesFromElements(}path="teams/:teamId"loader={async ({ params }) => {return fetch(`/fake/api/teams/${params.teamId}.json`);}}action={async ({ request }) => {return updateFakeTeam(await request.formData());}}errorElement={}/>)
);

渲染内容为element，当渲染出错会渲染errorElement（该组件中通过hook：useRouteError可以获取到错误信息，之后ui显示处理），path为*匹配任何路由用来兜底

• loader：在内容渲染前为element提供数据=》获取数据读，在element组件中通过useLoaderData()获取数据，在整个项目中任何地方获取用useRouteLoaderData（此时路由里边要加上id，该hook通过id获取对应数据）

createBrowserRouter([{path: "/",loader: () => fetchUser(),element: ,id: "root",children: [{path: "jobs/:jobId",loader: loadJob,element: ,},],},
]);const user = useRouteLoaderData("root");

• action：解决于form组件等，可以接收组件提交的数据并处理=》处理数据写，在组件中获取其数据用useActionData

import { useActionData, Form } from "react-router-dom";export default function Login() {//页面初次渲染，获取为空  并不会触发上面的action submit后才会触发const errors = useActionData();return (
{errors?.email && {errors.email}}
{errors?.password && {errors.password}}
Sign up
);
}export async function loginAction({ request }) {const formData = await request.formData();const email = formData.get("email");const password = formData.get("password");const errors = {};// validate the fieldsif (typeof email !== "string" || !email.includes("@")) {errors.email ="That doesn't look like an email address";}if (typeof password !== "string" || password.length < 6) {errors.password = "Password must be > 6 characters";}// return data if we have errorsif (Object.keys(errors).length) {return errors;}// otherwise create the user and redirectawait createUser(email, password);return redirect("/dashboard");
}

loader和action中可以使用redirect跳转，注意redirect跳转 前面加上return，loader和action要求必须有return，不跳转并直接导致loader/action报错，redirect不在其他地方使用，其他地方用navigate/useNavigate实现重定向

 权限控制实现

使用loader去获取用户权限信息，组件上包裹一层权限组件，里面获取loader中获取的权限信息，之后判断要显示的组件是否在权限内。

import { lazy, Suspense } from "react";
import { createBrowserRouter, Navigate, redirect } from "react-router-dom";
import type { RouteObject } from "react-router-dom";
import ErrorBoundary from "../components/ErrorBoundary";// 不需要懒加载的页面组件
import Layout from "../pages/Layout";
import Permission from "../components/Permission";
import NotFound from "../container/NotFound";// 需要懒加载的页面组件
const Home = lazy(() => import("../container/Home"));
const About = lazy(() => import("../container/About"));
const Setting = lazy(() => import("../container/Setting"));
const Login = lazy(() => import("../container/Login"));/*** @param Component 懒加载的组件* @param code 用于判断权限的字段(你可以自己定)* @returns*/
const LazyLoad = (Component: React.LazyExoticComponent<() => JSX.Element>,code?: string
) => {return (loading...