react router v6路由懒加载

一、路由模块lazy加载

// routers / a / index.ts
import { lazy } from "react";

export default [
    {
        title: '页面路由',
		path: '...',
        element: lazy(() => import(`...`)),
	},
    ...
]

二、路由统一集成暴露

// routers / index.ts
import a from './a'
import b from './b'
...

export default [
    ...a,
    ...b,
    ...
]

三、封装异步加载组件

// components / lazy-component / index.tsx
import Loading from '../loading';
import React, { Suspense,LazyExoticComponent } from 'react';

export const LazyImportComponent = (props: {
  component: LazyExoticComponent<() => JSX.Element>;
}) => {
  return (
    <Suspense fallback={<Loading />}>
      <props.component />
    </Suspense>
  );
};

四、判定访问权限

无权限显示组件：

// components / no-permission / index.tsx
import React from 'react'
import { Button, Result } from 'antd';
import { useNavigate } from "react-router-dom";
export default () => {
  const navigate = useNavigate()
  return (
    <Result
        status="403"
        title="403"
        subTitle="暂无此菜单权限！"
        extra={<Button type="primary" onClick={() => navigate('/')}>返回首页</Button>}
    />
  )
}

 判断方法：

//根据权限判断菜单是否有访问权限
let NoPermission = lazy(() => import('../components/no-permission'));
const getComponent = (permissionCode: any, component: any) => {
     if (permissionCode && permissionCode.length > 0) {
        if (userInfo.hasPermission(permissionCode)) { 
           return component; // 有权限显示原来组件
        } else { // 没权限
           return NoPermission; // 没权限显示403组件
        }
     }
     return component; // 无权限限制显示当前组件
}

五、挂载路由

// main / index.tsx
import routers from '../routers'
import {LazyImportComponent} from '../components/lazy-component'

const App = () => {
    const initRoute = routers.map(route => {
        return {
            path: route.path,
            element: <LazyImportComponent component={ getComponent(route?.permissionCode, route.element) } />
        }
    })

    //初次加载重定向
    //获取第一条 显示在菜单中 && 有权限 的路由作为默认显示路由
    const startRoute = routers.find((route: any) => route.isShow && userInfo.hasPermission(route.permissionCode));
    initRoute.push({
	    path: '*',																
	    element: <Navigate to={startRoute?.path} />						
    })

    const element = useRoutes(initRoute);
    
    return (
        ...
        {element}
        ...
    )
}