react 后台管理页面引入动态路由（react-router-dom）

1、动态路由数据源

import { UserOutlined, VideoCameraOutlined, AppstoreOutlined } from "@ant-design/icons";
const menuList = [{
    key: 'sub1',
    title: '首页',
    icon: <UserOutlined />,
    path: '/homePage',
    sourcePath: 'views/homePage',
    children: []
}, {
    key: 'sub2',
    title: '应用管理',
    icon: <AppstoreOutlined />,
    path: '/application',
    children: [{
        key: '1',
        title: '应用列表',
        path: '/appList',
        sourcePath: 'views/application/appList',
    }, {
        key: '2',
        title: '应用角色管理',
        path: '/appRoles',
        sourcePath: 'views/application/appRoles',
    }, {
        key: '3',
        title: '应用审核',
        path: '/appListReview',
        sourcePath: 'views/application/appListReview',
    }]
}, {
    key: 'sub3',
    title: '组织机构管理',
    icon: <VideoCameraOutlined />,
    path: '/organization ',
    children: [{
        key: '5',
        title: '服务管理',
        path: '/service',
        sourcePath: 'views/application/service',
    }, {
        key: '6',
        title: '组织机构',
        path: '/organ',
        sourcePath: 'views/application/organ',
    }, {
        key: '7',
        title: '用户管理',
        path: '/user',
        sourcePath: 'views/application/user',
    }, {
        key: '8',
        title: '区域管理',
        path: '/region',
        sourcePath: 'views/application/region',
    }]
}];

export default menuList;

2、路由嵌套，实现动态路由

import React, { lazy, Suspense } from 'react';
import { Layout } from 'antd';
import { Switch, Route } from 'react-router-dom';
import menuList from '@/config/menuConfig';// 数据源
import "./index";

const { Content } = Layout
let routerLists = []

const getmenu = () => {
    menuList.map(item => {
        if (item.children && item.children.length < 1) {
            routerLists.push(item);
        } else if (item.children.length >= 1) {
            item.children.map(child => {
                routerLists.push(child);
            })
        } else {
            console.error(item, 'ERROR')
        }
    })
}

const LayoutContent = (props) => {
    getmenu(); // routerLists 赋值
    return (
        <Content style={{ margin: '24px 16px', padding: 24, background: '#fff', minHeight: 280 }}>
            <Suspense fallback={<div style={{ textAlign: 'center', fontSize: '20px', padding: '100px 0', color: '#0d7bff' }}>Loading...</div>}>
                <Switch>
                    {routerLists.map(item =>
                        < Route path={item.path} key={item.key} component={
                            item.component ? item.component : lazy(() => import(`@/${item.sourcePath}`))} />
                    )}
                </Switch>
            </Suspense>
        </Content>
    )
}
export default LayoutContent

3、注意

<Suspense fallback={<div style={{ textAlign: 'center', fontSize: '20px', padding: '100px 0', color: '#0d7bff' }}>Loading...</div>}>
	<Switch>
		{routerLists.map(item =>
        	< Route path={item.path} key={item.key} component={
              item.component ? item.component : lazy(() => import(`@/${item.sourcePath}`))} />
         )}
     </Switch>
 </Suspense>

（1）用 lazy 的时候可要与 Suspense 标签 配合使用

（2）代码分割 请参考

lazy(() => import(`@/${item.sourcePath}`)) 
// 等价于
import Home from '@/views/home';

基于路由的代码分割

决定在哪引入代码分割需要一些技巧。你需要确保选择的位置能够均匀地分割代码包而不会影响用户体验。

一个不错的选择是从路由开始。大多数网络用户习惯于页面之间能有个加载切换过程。你也可以选择重新渲染整个页面，这样您的用户就不必在渲染的同时再和页面上的其他元素进行交互。

这里是一个例子，展示如何在你的应用中使用 React.lazy 和 React Router 这类的第三方库，来配置基于路由的代码分割。

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route path="/about" component={About}/>
      </Switch>
    </Suspense>
  </Router>
);

（3）如果你这里@引入出错，可能是因为你没有用配置 @ 根目录：

配置请参考：react 配置@根路径