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 : <Navigate to="/login" />;
};
// 判断当前页面是否是登录页面，如果是登录页面，则清空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={<Loading />}
  return (
    <React.Suspense>
      <Module />
    </React.Suspense>
  );
};
export let mainRouteConfig: Route[] = [
  {
    path: '/',
    title: '首页',
    element: <Appraisal>{lazyLoad('Layout')}</Appraisal>,
    children: [
      {
        path: '/',
        title: '首页',
        element: <Appraisal>{lazyLoad('Home')}</Appraisal>
      }
    ]
  },
  {
    path: '/login',
    title: '登录',
    element: <AppLogin>{lazyLoad('Login')}</AppLogin>
  }
];

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 (
    <Router>
      {/*  */}
        <SetRoutes />
    </Router>
  );
};
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 (
    <Routers />
  );
}

export default App;

2.接口返回

接口返回的路由

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

3.普通react项目（非Vite）

可以直接使用import来添加

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