ant-design-pro dynamic menu - Detailed route
recently used items before the ant-design-pro development projects to implement the new project to embed and display the sidebar menu based on the data and the background of the interface returned. Since it is the use of someone else's architecture course, is to find ways to achieve from the document, and finally that hard to find initial solutions in the document where https://pro.ant.design/docs/router-and-nav-cn
Entering src / layouts / Basilayout.js directly copy the code official network, replace the original file.
Now officially into the topic.
1, to establish contact with the models connect using a menu in a pull src / layouts / Basilayout.js in
I it is in the views of models following the code so as
export default connect (({global, setting, views}) => ({
Collapsed: global.collapsed,
layout: setting.layout,
... Setting,
... views,
})) (, BasicLayout);
2, the life cycle in function componentDidMount src / layouts / Basilayout.js pulling in which the interface call menu,
componentDidMount () {
const} = {dispatch this.props;
dispatch ({
type: 'views / FETCH',
}) ;
}
I retrieved is views.js inside the fetch method effects of the following
as to which model how to write official documents https://pro.ant.design/docs/server-cn can see
here is the model I wrote a views of - (keyword following code is getMenuMapArrData)
import { getMenuList } from '@/services/api'
import { getMenuSessionData, getMenuMapArrData } from '@/utils/utils.js'
export default {
namespace: 'views',
state: {
datas: [],
urlValues: 'https://boss.icarbonx.com/lims-ui/baselab/qcPaths/exception',
urlDatas: [],
},
effects: {
*fetch({ payload }, { call, put }) {
const response = yield call(getMenuList, payload);
console.log(response,'得到列表')
yield put({
type: 'save',
payload: response
})
},
*changeurl({ payload }, { call, put }){
yield put({
type: 'change',
payload: payload
})
},
},
the reducers: {
Save (State, Action) {
return {
... State,
DATAS: getMenuMapArrData (action.payload),
urlDatas: getMenuSessionData (action.payload),
}
},
Change (State, Action) {
return {
... State,
urlValues: action.payload,
}
},
}
}
3, getMenuList menu interface has returned formatted, of course, some old iron directly in the form of written router.config.js but some cases data is not returned back office staff this requires us to this format.
Ideally, the data returned is
[{
path: '/user',
component: '../layouts/UserLayout',
routes: [
{ path: '/user', redirect: '/user/login' },
{ path: '/user/login', component: './User/Login' },
{ path: '/user/register', component: './User/Register' },
{ path: '/user/register-result', component: './User/RegisterResult' },
],
}]
**现实情况返回的：**
**[
{
"id": "dashboardws",
"name": "Dashboard",
"description": "Dashboard",
"url": 'https://boss.xxx.com/qcScheme/qcPrograms',
component: './View/home',
"children": []
},
{
"id": "knowledge",
"name": "Knowledge Platform",
component: './View/home',
"url": null,
"children": [
{
"id": "gene",
"name": "Gene",
component: './View/home',
"url": 'https://XXX.XXX.com/qcPaths/qualityProjectQuery',
"children": null
},
{
"id": "phenotype",
"name": "Phenotype",
component: './View/home',
"url": 'https://XXX.XXX.com/lims-ui/baselab/qcPaths',
"children": null
},
{
"id": "microbes",
"name": "Microorganism",
component: './View/home',
"url": 'https://boss.xxx.com/qcPaths/qcSamplesCheck',
"children": null
}
]
},
{
"ID": "indicatorww",
"name": "Index Platform",
"URL": 'https://baidu.com',
"Children": []
},
{
"ID": "Report",
"name ":" the Report Platform ",
" URL ": 'https://boss.xxx.com/limb/qcScheme/qcSamples',
" Children ": []
}
]
in this case can not be directly treated first, by me utils.js getMenuMapArrData to write a method called background formatting the returned data into a format similar to the ideal state,
similar to the - (key code is below routes)
const menuListData = [
{
"id": "knowledge",
"name": "Knowledge Platform",
component: './View/home',
"url": null,
"routes": [
{
"id": "gene",
"name": "Gene",
component: './View/home',
"url": 'https://XXX.XXX.com/qcPaths/qualityProjectQuery',
"children": null
},
{
"id": "phenotype",
"name": "Phenotype",
component: './View/home',
"url": 'https://XXX.XXX.com/lims-ui/baselab/qcPaths',
"children": null
},
{
"id": "microbes",
"name": "Microorganism",
component: './View/home',
"URL": 'https://boss.xxx.com/qcPaths/qcSamplesCheck',
"Children": null
}
]
},
]
mostly here you format which have this property routes, the system can identify you menu, of course, no change may not require a sub-level menu.
4, need router.config.js inside your menu complete works written. You must be a dynamic pull you router.config.js inside some routes to be effective.
5, I was there when nested iframe through some pages so I write routing rules router.config.js I use dynamic routing configuration
that router.config.js
{
path: '/: POST',
the Component: ' ./View/home ',
},
{
path:' /: POST /: ID ',
Component:' ./View/home ',
},
after the write in my experiment
{
Component:' 404 ',
},
the front will not be 404 redirected
6, acquires the src / layouts / Basilayout.js menu list in the processed data, the render () function inside const menuData = this.getMenuData () sentence, getMenuData retrieval method, there is obtained dynamically by this.props datas, datas menu data is processed after me.
Note: If the original data is not ideal data without treatment, but in this getMenuData in the process, some unexpected error occurs.
getMenuData () {
const {
DATAS,
route: routes} {,
} = this.props;
const newRoutes = [... DATAS, routes ...]
return memoizeOneFormatter (Array.from ([... newRoutes]));
}
7, bringing to an end should be able to complete