网站建设顺德aso优化渠道

前言：
原生态React 路由控制采用的react-router-dom，当天umi是单独封装处理。

需求：
可以根据登录后后端数据返回 控制路由
1.常规写法：
react 会默认在Roots.jsx里引用Routes.jsx

import { ConfigProvider, Spin, Layout, Space, message }from 'antd'
import Routes from './Routes'//省略ConfigProvider antd全局配置return <ConfigProvider> <Layout> <Routes  /></Layout> </ConfigProvider>

2.Routes.jsx 组件

import { Route, Switch, Redirect, useLocation } from 'react-router-dom'const Routes = ()=>{return   <Switch> //这里丢一些不用控制的路由例如登录，修改密码等<Route path="/login" component={Login} /><Route path="/forget-password" component={ForgetPassword} />//重点来了 动态生成路由{loggedin ? (           (routeList)?.map((item) => getRoute(item)) ) ：null}//找不到路由访问的是NotFound页面<Route component={NotFound} /></Switch>
}

3.动态路由 routeList

import React, { lazy} from 'react'
const routeList = [{path: '/home',component: lazy(() => import('./layout')),permissionId: 'all',children: [{path: '/',component: lazy(() => import('./HomePage')),permissionId: 'all',},],},{path: '/test',component: lazy(() => import('./layout')),id: '1',permissionId: 119,// permissionId:'all',children: [{path: '/test1',component: lazy(() => import('./CustomSales/list')),permissionId: 121,},{path: '/test2',component: lazy(() => import('./CustomSales/list')),permissionId: 122,},//自定义文件夹{path: '/test3',component: lazy(() => import('./layout')),permissionId: 137,//文件夹列表children: [{path: '/',component: lazy(() => import('./CustomSales/customFolderClient')),permissionId: 139,},//文件夹详情{path: '/:queryId',component: lazy(() => import('./CustomSales/list')),permissionId: 140,},],},//共享文件夹{path: '/test4',component: lazy(() => import('./layout')),permissionId: 138,//文件夹列表children: [{path: '/',component: lazy(() => import('./CustomSales/shareFolderClient')),permissionId: 147,},//文件夹详情{path: '/:queryId',component: lazy(() => import('./CustomSales/list')),permissionId: 150,},],},{path: '/detail/:id',component: lazy(() => import('./CustomSalesDetail/detail')),permissionId: 126,},],},{path: '/',// component: lazy(() => import('./HomePage')),component: () => <Redirect to="/homepage" />,permissionId: 'all',},
]
注意有两个地方：
1. path: '/'  一定放最后不然会拦截前面的路由 （Switch）原因
2. 后端返回的component是一个字符串路由，前端需要lazy懒加载组件包裹起来

3.getRoutes组件

    const getRoute = (value) => {return (<PrivateRoutekey={value.path}path={value.path}component={value.component}child={value.children}/>)}```4.PrivateRoute组件（控制一级登录权限问题），layout组件仿照Vue-Router写法，组件资源已上传可以免费查看。
这里还有优化空间可以不用两个组件，大家可以自行优化。