有关react的ui组建antd.design新推出的pro版本，最近用到了路由方面。
common与routes;
首先需要在menu.js里面配置：
{
name: ‘精品‘,
icon: ‘dashboard‘,
path: ‘finequality‘,
children: [
{
name: ‘精品vue‘,
path: ‘finevue‘,
},
{
name: ‘精品react‘,
path: ‘finereact‘,
},
{
name: ‘精品angular‘,
path: ‘fineangular‘,
// hideInBreadcrumb: true,
// hideInMenu: true,
},
],
},
{
name: ‘首页‘,
icon: ‘dashboard‘,
path: ‘homepage‘,
children: [
{
name: ‘首页1‘,
path: ‘onepage‘,
},
],
},
{
name: ‘任务管理‘,
icon: ‘dashboard‘,
path: ‘task‘,
children: [
{
name: ‘任务1‘,
path: ‘administration_1‘,
},
{
name: ‘任务2‘,
path: ‘administration_2‘,
},
],
},
{
name: ‘数据管理‘,
icon: ‘dashboard‘,
path: ‘data‘,
children: [
{
name: ‘数据管理1‘,
path: ‘administration_1‘,
},
{
name: ‘数据管理2‘,
path: ‘administration_2‘,
},
],
},
{
name: ‘模板管理‘,
icon: ‘dashboard‘,
path: ‘template‘,
children: [
{
name: ‘数据管理1‘,
path: ‘administration_1‘,
},
{
name: ‘数据管理2‘,
path: ‘administration_2‘,
},
],
},
{
name: ‘数据源管理‘,
icon: ‘dashboard‘,
path: ‘datasource‘,
children: [
{
name: ‘数据管理1‘,
path: ‘administration_1‘,
},
{
name: ‘数据管理2‘,
path: ‘administration_2‘,
},
],
},
{
name: ‘服务器管理‘,
icon: ‘dashboard‘,
path: ‘theserver‘,
children: [
{
name: ‘数据管理1‘,
path: ‘administration_1‘,
},
{
name: ‘数据管理2‘,
path: ‘administration_2‘,
},
],
},
{
name: ‘报警管理‘,
icon: ‘dashboard‘,
path: ‘callpol‘,
children: [
{
name: ‘报警管理1‘,
path: ‘administration_1‘,
},
{
name: ‘报警管理2‘,
path: ‘administration_2‘,
},
],
},
{
name: ‘IP地址池管理‘,
icon: ‘dashboard‘,
path: ‘addressip‘,
children: [
{
name: ‘IP地址池管理1‘,
path: ‘administration_1‘,
},
{
name: ‘IP地址池管理2‘,
path: ‘administration_2‘,
},
],
},
{
name: ‘日志管理‘,
icon: ‘dashboard‘,
path: ‘journal‘,
children: [
{
name: ‘IP地址池管理1‘,
path: ‘administration_1‘,
},
{
name: ‘IP地址池管理2‘,
path: ‘administration_2‘,
},
],
},
{
name: ‘角色管理‘,
icon: ‘dashboard‘,
path: ‘role‘,
children: [
{
name: ‘角色管理1‘,
path: ‘administration_1‘,
},
{
name: ‘角色管理2‘,
path: ‘administration_2‘,
},
],
},
{
name: ‘用户管理‘,
icon: ‘dashboard‘,
path: ‘userp‘,
children: [
{
name: ‘用户管理1‘,
path: ‘administration_1‘,
},
{
name: ‘用户管理2‘,
path: ‘administration_2‘,
},
],
},
其次在routes配置：
‘/homepage/onepage‘:{
component: dynamicWrapper(app, [], () => import(‘../routes/Homepage/Homepagei‘)),//首页
},
‘/task/administration_1‘:{
component: dynamicWrapper(app, [], () => import(‘../routes/Task/Index‘)),//任务管理1
},
‘/task/administration_2‘:{
component: dynamicWrapper(app, [], () => import(‘../routes/Task/Subpage‘)),//任务管理2
},
‘/data/administration_1‘:{
component: dynamicWrapper(app, [], () => import(‘../routes/Data/Dataindex‘)),//数据管理1
},
‘/data/administration_2‘:{
component: dynamicWrapper(app, [], () => import(‘../routes/Data/Datasubpage‘)),//数据管理2
},
‘/template/administration_1‘:{
component: dynamicWrapper(app, [], () => import(‘../routes/Template/Templateindex‘)),//模板管理1
},
‘/template/administration_2‘:{
component: dynamicWrapper(app, [], () => import(‘../routes/Template/Templatesubpage‘)),//模板管理2
},
‘/datasource/administration_1‘:{
component: dynamicWrapper(app, [], () => import(‘../routes/Datasource/Datasourcei‘)),//数据源管理1(i表示index)
},
‘/datasource/administration_2‘:{
component: dynamicWrapper(app, [], () => import(‘../routes/Datasource/Datasources‘)),//数据源管理2(s表示subpage)
},
‘/theserver/administration_1‘:{
component: dynamicWrapper(app, [], () => import(‘../routes/Theserver/Theserveri‘)),//服务器管理1(i表示index)
},
‘/theserver/administration_2‘:{
component: dynamicWrapper(app, [], () => import(‘../routes/Theserver/Theservers‘)),//服务器管理2(s表示subpage)
},
‘/callpol/administration_1‘:{
component: dynamicWrapper(app, [], () => import(‘../routes/Callpol/Callpoli‘)),//报警管理1(i表示index)
},
‘/callpol/administration_2‘:{
component: dynamicWrapper(app, [], () => import(‘../routes/Callpol/Callpols‘)),//报警管理2(s表示subpage)
},
‘/addressip/administration_1‘:{
component: dynamicWrapper(app, [], () => import(‘../routes/Addressip/Addressi‘)),//IP地址池管理1(i表示index)
},
‘/addressip/administration_2‘:{
component: dynamicWrapper(app, [], () => import(‘../routes/Addressip/Addresss‘)),//IP地址池管理2(s表示subpage)
},
‘/journal/administration_1‘:{
component: dynamicWrapper(app, [], () => import(‘../routes/Journal/Journali‘)),//IP地址池管理1(i表示index)
},
‘/journal/administration_2‘:{
component: dynamicWrapper(app, [], () => import(‘../routes/Journal/Journals‘)),//IP地址池管理2(s表示subpage)
},
‘/role/administration_1‘:{
component: dynamicWrapper(app, [], () => import(‘../routes/Role/Rolei‘)),//IP地址池管理1(i表示index)
},
‘/role/administration_2‘:{
component: dynamicWrapper(app, [], () => import(‘../routes/Role/Roles‘)),//IP地址池管理2(s表示subpage)
},
‘/userp/administration_1‘:{
component: dynamicWrapper(app, [], () => import(‘../routes/Userp/Userpi‘)),//IP地址池管理1(i表示index)
},
‘/userp/administration_2‘:{
component: dynamicWrapper(app, [], () => import(‘../routes/Userp/Userps‘)),//IP地址池管理2(s表示subpage)
},
最后跟句路径创建文件夹写出对应的js文件：举个例子比如，
在routes文件夹下面创建Userp文件夹，在下面创造两个js文件：Userpi.js,Userps.js。
在此需要注意：Userp/Userps文件夹大写，js文件大写，其余路由与path都按小写。根据pro例子来
原文地址：https://www.cnblogs.com/MDGE/p/9264143.html