react 路由管理自定义路由组件（React动态生成路由）仿Vue-router写法

前言：
原生态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 (
            <PrivateRoute
                key={value.path}
                path={value.path}
                component={value.component}
                child={value.children}
            />
        )
    }```

4.PrivateRoute组件（控制一级登录权限问题），layout组件仿照Vue-Router写法，组件资源已上传可以免费查看。
这里还有优化空间可以不用两个组件，大家可以自行优化。