react 路由拦截

import React, { lazy, Suspense } from 'react';
import Edit from '../pages/ceshi/table/AddEdit';
import Details from '../pages/ceshi/table/Details';
import { Navigate, useLocation, useRoutes } from 'react-router-dom';
let Page404 = lazy(() => import('../pages/result/404'));
let Home = lazy(() => import('../pages/home/index'));
let Ceshi = lazy(() => import('../pages/ceshi/ceshi'));
let Login = lazy(() => import('../pages/login/Login'));
let CustomerNeed = lazy(() => import('../pages/ceshi/table'));
let Fixtureeditadd = lazy(() => import('../pages/fixture/customer/fixture/AddEdit'));
let RolePage = lazy(() => import('../pages/system/role/role'));
let Menumanage = lazy(() => import('../pages/system/menu/index'));
let Usermanage = lazy(() => import('../pages/system/user/index'));
let PersonalCenter = lazy(() => import('../pages/system/personal/index'));
let Fixturedemandpu = lazy(() => import('../pages/fixture/platform/index'));
let FixtureDtails = lazy(() => import('../pages/details/index'));
let DetailsAddEdit = lazy(() => import('../pages/details/AddEdit'));
let RoleManage = lazy(() => import('../pages/system/role/index'));
let PerfectDemand = lazy(() => import('../pages/fixture/platform/PerfectDemand'));
let PerfectdetailsDemand = lazy(() => import('../pages/fixture/platform/PerfectDemand/details'));
let FixtureQuotation = lazy(
  () => import('../pages/fixture/platform/sale/fixture/FixtureQuotation')
);
let FixtureQuotationDetails = lazy(
  () => import('../pages/fixture/platform/sale/fixture/FixtureQuotationDetails')
);
let QuotedPrice = lazy(() => import('../pages/quotedprice/platform/sale/index'));
let QuotedPricecg = lazy(() => import('../pages/quotedprice/platform/purchase/index'));
let QuotationDetails = lazy(() => import('../pages/quotedprice/platform/sale/QuotationDetails'));
let QuotationcgDetails = lazy(
  () => import('../pages/quotedprice/platform/purchase/QuotationDetails')
);
let FixturePurchase = lazy(() => import('../pages/purchase/index'));
let EnterpriseNum = lazy(() => import('../pages/system/enterprise'));
let PermissionPage = lazy(() => import('../pages/system/permission'));
let PermissionWord = lazy(() => import('../pages/system/permissionword/index'));
let PurchaseDetails = lazy(() => import('../pages/purchase/platform/PurchaseDetails'));
let InitiatePurchase = lazy(() => import('../pages/fixture/platform/purchase/AddEdit'));
let Verification = lazy(() => import('../pages/verification/index'));
let NumDetailed = lazy(() => import('../pages/verification/NumDetailed'));
let PurchaseEditAdd = lazy(() => import('../pages/purchase/platform/addedit/AddEdit'));
let QuotationsuDetails = lazy(() => import('../pages/purchase/supplier/QuotationsuDetails'));
let UserAddEdit = lazy(() => import('../pages/system/user/AddEdit'));
let DepartmentPage = lazy(() => import('../pages/system/department'));
let DepartmentEidtAdd = lazy(() => import('../pages/system/department/AddEdit'));
namespace SyncRoute {
  export type Routes = {
    path: string;
    element: React.ReactNode;
    children?: Routes[];
  };
}
export const rootRouter: SyncRoute.Routes[] = [
  {
    path: '/',
    element: <Navigate to="/login" />
  },
  {
    path: '/',
    element: (
      <Suspense>
        <Home />
      </Suspense>
    ),
    children: [
      {
        path: '/edit',
        element: (
          <Suspense>
            <Edit></Edit>
          </Suspense>
        )
      },
      {
        path: '/department',
        element: (
          <Suspense>
            <DepartmentPage></DepartmentPage>
          </Suspense>
        )
      },
      {
        path: '/epartmentaddedit',
        element: (
          <Suspense>
            <DepartmentEidtAdd></DepartmentEidtAdd>
          </Suspense>
        )
      },
      {
        path: '/useraddedit',
        element: (
          <Suspense>
            <UserAddEdit></UserAddEdit>
          </Suspense>
        )
      },
      {
        path: '/customerneed',
        element: (
          <Suspense>
            <CustomerNeed></CustomerNeed>
          </Suspense>
        )
      },
      {
        path: '/purchaseeditadd',
        element: (
          <Suspense>
            <PurchaseEditAdd></PurchaseEditAdd>
          </Suspense>
        )
      },
      {
        path: '/quotationsudetails',
        element: (
          <Suspense>
            <QuotationsuDetails></QuotationsuDetails>
          </Suspense>
        )
      },
      {
        path: '/verification',
        element: (
          <Suspense>
            <Verification></Verification>
          </Suspense>
        )
      },
      {
        path: '/numdetailed',
        element: (
          <Suspense>
            <NumDetailed></NumDetailed>
          </Suspense>
        )
      },
      {
        path: '/permissionpage',
        element: (
          <Suspense>
            <PermissionPage></PermissionPage>
          </Suspense>
        )
      },
      {
        path: '/purchasedetails',
        element: (
          <Suspense>
            <PurchaseDetails></PurchaseDetails>
          </Suspense>
        )
      },
      {
        path: '/perfectdetailsdemand',
        element: (
          <Suspense>
            <PerfectdetailsDemand></PerfectdetailsDemand>
          </Suspense>
        )
      },
      {
        path: '/enterprisenum',
        element: (
          <Suspense>
            <EnterpriseNum></EnterpriseNum>
          </Suspense>
        )
      },
      {
        path: '/permissionword',
        element: (
          <Suspense>
            <PermissionWord></PermissionWord>
          </Suspense>
        )
      },
      {
        path: '/detailsaddedit',
        element: (
          <Suspense>
            <DetailsAddEdit></DetailsAddEdit>
          </Suspense>
        )
      },
      {
        path: '/fixturepurchasecg',
        element: (
          <Suspense>
            <FixturePurchase></FixturePurchase>
          </Suspense>
        )
      },
      {
        path: '/fixturepurchasegys',
        element: (
          <Suspense>
            <FixturePurchase></FixturePurchase>
          </Suspense>
        )
      },
      {
        path: '/perfectdemand',
        element: (
          <Suspense>
            <PerfectDemand></PerfectDemand>
          </Suspense>
        )
      },
      {
        path: '/fixturedtails',
        element: (
          <Suspense>
            <FixtureDtails></FixtureDtails>
          </Suspense>
        )
      },
      {
        path: '/fixturequotation',
        element: (
          <Suspense>
            <FixtureQuotation></FixtureQuotation>
          </Suspense>
        )
      },
      {
        path: '/fixturedemandkh',
        element: (
          <Suspense>
            <Fixturedemandpu></Fixturedemandpu>
          </Suspense>
        )
      },
      {
        path: '/fixturequotationdetails',
        element: (
          <Suspense>
            <FixtureQuotationDetails></FixtureQuotationDetails>
          </Suspense>
        )
      },
      {
        path: '/fixturedemandyy',
        element: (
          <Suspense>
            <Fixturedemandpu></Fixturedemandpu>
          </Suspense>
        )
      },
      {
        path: '/sale/quotedpricexs',
        element: (
          <Suspense>
            <QuotedPrice></QuotedPrice>
          </Suspense>
        )
      },
      {
        path: '/sale/quotedpricekh',
        element: (
          <Suspense>
            <QuotedPrice></QuotedPrice>
          </Suspense>
        )
      },
      {
        path: '/purchase/quotedpricecg',
        element: (
          <Suspense>
            <QuotedPricecg></QuotedPricecg>
          </Suspense>
        )
      },
      {
        path: '/purchase/quotedpricegys',
        element: (
          <Suspense>
            <QuotedPricecg></QuotedPricecg>
          </Suspense>
        )
      },
      {
        path: '/sale/quotationdetails',
        element: (
          <Suspense>
            <QuotationDetails></QuotationDetails>
          </Suspense>
        )
      },
      {
        path: '/purchase/quotationdetails',
        element: (
          <Suspense>
            <QuotationcgDetails></QuotationcgDetails>
          </Suspense>
        )
      },
      {
        path: '/fixturedemandgc',
        element: (
          <Suspense>
            <Fixturedemandpu></Fixturedemandpu>
          </Suspense>
        )
      },
      {
        path: '/fixturedemandxs',
        element: (
          <Suspense>
            <Fixturedemandpu></Fixturedemandpu>
          </Suspense>
        )
      },
      {
        path: '/fixturedemandcg',
        element: (
          <Suspense>
            <Fixturedemandpu></Fixturedemandpu>
          </Suspense>
        )
      },
      {
        path: '/initiatepurchase',
        element: (
          <Suspense>
            <InitiatePurchase></InitiatePurchase>
          </Suspense>
        )
      },
      {
        path: '/fixtureeditadd',
        element: (
          <Suspense>
            <Fixtureeditadd></Fixtureeditadd>
          </Suspense>
        )
      },
      {
        path: '/details',
        element: (
          <Suspense>
            <Details></Details>
          </Suspense>
        )
      },
      {
        path: '/ceshi',
        element: (
          <Suspense>
            <Ceshi></Ceshi>
          </Suspense>
        )
      },
      {
        path: '/role',
        element: (
          <Suspense>
            <RolePage></RolePage>
          </Suspense>
        )
      },
      {
        path: '/rolemanage',
        element: (
          <Suspense>
            <RoleManage></RoleManage>
          </Suspense>
        )
      },
      {
        path: '/menumanage',
        element: (
          <Suspense>
            <Menumanage></Menumanage>
          </Suspense>
        )
      },
      {
        path: '/usermanage',
        element: (
          <Suspense>
            <Usermanage></Usermanage>
          </Suspense>
        )
      },
      {
        path: '/personalcenter',
        element: (
          <Suspense>
            <PersonalCenter></PersonalCenter>
          </Suspense>
        )
      },
      {
        path: '*',
        element: <Navigate to="/404" />
      },
      {
        path: '/404',
        element: (
          <Suspense>
            <Page404 />
          </Suspense>
        )
      }
    ]
  },
  {
    path: '/login',
    element: (
      <Suspense>
        <Login />
      </Suspense>
    )
    // meta: {
    //   requiresAuth: false,
    //   title: '登录页',
    //   key: 'login'
    // }
  },
  {
    path: '*',
    element: <Navigate to="/404" />
  }
];


const RouterBeforeEach = (props:any) => {
  if (props?.route?.meta?.title) {
    document.title = props.route.meta.title;
  }
  const isLogin = false;
  if (props?.route?.meta?.isLogin) {
    if (!isLogin) {
      return <Navigate to={"/"} replace />;
    }
  }
  const location = useLocation();
  const routerKey = location.pathname;
  if (isLogin && ["/login"].includes(routerKey)) {
    return <Navigate to={"/"} replace />;
  }
  return <div>{props.children}</div>;
};


// 渲染路由
const renderRoutes = (routes:any) => {
  return routes.map((item:any) => {
    const route:any = { meta: item?.meta, path: item.path };
    if (item.element) {
      route.element = (
        <RouterBeforeEach route={item}>{item.element}</RouterBeforeEach>
      );
    }
    if (item.children) {
      route.children = renderRoutes(item.children);
    }
    if (item.redirect) {
      route.element = <Navigate to={item.redirect} />;
    }
    return route;
  });
};


const Router = () => {
  // const routes = useRoutes(rootRouter);
  // return routes;
  return useRoutes(renderRoutes(rootRouter));
};

export default Router;

　　

import Home from "./Home";
import About from "./About";

export const router = [
  {
    path: "/",
    redirect: "home"
  },
  {
    path: "home",
    component: <Home />
  },
  {
    path: "about",
    component: <About />,
    meta: {
      isLogin: true
    }
  }
];


import { router } from "./routers";
import { Navigate, useRoutes, useLocation } from "react-router-dom";

// 拦截
const RouterBeforeEach = (props) => {
  if (props?.route?.meta?.title) {
    document.title = props.route.meta.title;
  }
  const isLogin = false;
  if (props?.route?.meta?.isLogin) {
    if (!isLogin) {
      return <Navigate to={"/"} replace />;
    }
  }
  const location = useLocation();
  const routerKey = location.pathname;
  if (isLogin && ["/login"].includes(routerKey)) {
    return <Navigate to={"/"} replace />;
  }
  return <div>{props.children}</div>;
};

// 渲染路由
const renderRoutes = (routes) => {
  return routes.map((item) => {
    const route = { meta: item.meta, path: item.path };
    if (item.component) {
      route.element = (
        <RouterBeforeEach route={item}>{item.component}</RouterBeforeEach>
      );
    }
    if (item.children) {
      route.children = renderRoutes(item.children);
    }
    if (item.redirect) {
      route.element = <Navigate to={item.redirect} />;
    }
    return route;
  });
};

export default function Router() {
  return useRoutes(renderRoutes(router));
}