react:动态路由（vite）

在项目当中，尤其是在企业级的中后台项目当中，避免不了处理部分权限问题。这个时候就可以用动态路由来处理一路由导航权限问题。更为严格的权限问题，需要在实际的项目当中根据业务需求去处理。

1. vite

router/route.tsx

在之前的 Vue 文档中写过了关于动态动态路由的添加问题。可以根据 Vue 做为参考。

还有就是关于 React.Suspense

Suspense 目前在 react 中一般配合 lazy 使用，当有一些组件需要动态加载 (例如各种插件) 时可以利用 lazy 方法来完成。其中 lazy 接受类型为 Promise {default: ReactComponet}> 的参数，并将其包装为 react 组件。

import React from 'react';
import {Route, menuList} from './types';
import {Navigate, useNavigate} from 'react-router-dom';
// 判断当前用户是否登录没有登录跳转登录页
const Appraisal = ({children}: any) => {const userInfo: any = sessionStorage.getItem('userInfo');
  return userInfo ? children : ;
};
// 判断当前页面是否是登录页面，如果是登录页面，则清空 sesseion, 登录之后重新进行数据存储
const AppLogin = ({children}: any) => {return children;};
const lazyLoad = (moduleName: string) => {const viteModule = import.meta.glob('../**/**');
  // 组件地址
  const URL = `../pages/${moduleName}/index.tsx`;
  let Module = React.lazy(viteModule[`${URL}`] as any);
  // fallback={}
  return (
      
    
  );
};
export let mainRouteConfig: Route[] = [
  {
    path: '/',
    title: '首页',
    element: {lazyLoad('Layout')},
    children: [
      {
        path: '/',
        title: '首页',
        element: {lazyLoad('Home')}
      }
    ]
  },
  {
    path: '/login',
    title: '登录',
    element: {lazyLoad('Login')}
  }
];

router/index.tsx

import React from 'react'; // Suspense 配合前面的 laze() 使用，不加上会报错
import {BrowserRouter as Router, useRoutes, HashRouter} from 'react-router-dom'; // 引入 react-router-dom
import {mainRouteConfig} from './routes';
import {Route} from './types';
// 获取权限路由
const getPermissionRoutes = (routes: Route[]) => {
  // 这里写入权限判断逻辑, 然后生成新的路由
  return routes;
};
const SetRoutes = () => {return useRoutes(getPermissionRoutes(mainRouteConfig));
};
const Routers = (props: any) => {
  return (
      {/*  */}
        
    
  );
};
export default React.memo(Routers);

router/types.ts

export type Route = {
  path: string
  name?: string
  title?: string
  exact?: boolean
  element: any
  noAuth?: boolean
  children?: Route[]
  type?:string
}
export type menuList = {
label:string
element?:any
path:string
type:string
children?:menuList[]}

App.tsx

import Routers from '@/router';
function App() {
  return (
  );
}

export default App;

2. 接口返回

接口返回的路由

只需要将返回的数据添加到 mainRouteConfig 当中即可，但是返回的数据会是多层级的，只需要做一个递归循环即可。数据格式保持一致。代码就不举例了：自己动动手咯，

3. 普通 react 项目（非 Vite）

可以直接使用 import 来添加

let Module = React.lazy(() => import(`../pages/${moduleName}`));