ant-design-pro 动态菜单-路由详解

ant-design-pro 动态菜单-路由详解

最近利用ant-design-pro开发项目要实现以前的项目嵌入到新项目里来，而且根据和后台的接口返回的数据显示侧边栏菜单。既然是是利用别人的架构那固然是从文档中找实现的方法，终于不负苦心人在https://pro.ant.design/docs/router-and-nav-cn文档那里找到初步的解决方法

进入src/layouts/Basilayout.js在官网中直接复制该代码，将原文件替换。
如今正式进入正题。

1，在src/layouts/Basilayout.js中利用connect与拉取菜单的models创建联系

个人是放在views的models下面因此代码以下
export default connect(({global, setting, views }) => ({
collapsed: global.collapsed,
layout: setting.layout,
…setting,
…views,
}))(BasicLayout);

2，在src/layouts/Basilayout.js中的生命周期函数componentDidMount里面调用拉取菜单的接口，

componentDidMount() {
const { dispatch } = this.props;
dispatch({
type: ‘views/fetch’,
});
}
我调取的是下面views.js里面的effects的fetch方法
至于model里面怎么写能够看官方文档https://pro.ant.design/docs/server-cn
这里是我写的一个views的model
 

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
      })
    },
  },

  reducers: {
    save(state, action) {
      return {
        ...state,
        datas: getMenuMapArrData(action.payload),
        urlDatas: getMenuSessionData(action.payload),
      }
    },
    change(state, action) {
      return {
        ...state,
        urlValues:  action.payload,
      }
    },
  }
}

三、getMenuList菜单接口返回的格式化，固然有些老铁直接就按照router.config.js的形式写的可是有些状况是后台人员返回的数据并非这样这就须要咱们格式化。

理想状况返回的数据是
[{
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": "Report Platform",
        "url": 'https://boss.xxx.com/limb/qcScheme/qcSamples',
        "children": []
    }
]

这样的话不能直接用要先处理，个人话是经过utils.js里写一个名叫getMenuMapArrData的方法进行格式化将后台返回的数据处理成相似理想状态的格式，

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
            }
        ]
    },
]

主要是你格式化的这里里面要有routes这个属性，系统才能识别出你的菜单，固然没有子级菜单能够不须要改。

四、须要在router.config.js里面把你的菜单全集写出来。你动态拉取的必须是你router.config.js里面有的路由才能有效。

五、我那里是经过iframe嵌套一些页面因此我在写router.config.js的路由规则时我用到了动态路由的配置

即在router.config.js
{
path: ‘/:post’,
component: ‘./View/home’,
},
{
path: ‘/:post/:id’,
component: ‘./View/home’,
},
通过个人实验这个要写在
{
component: ‘404’,
},
的前面才不会被404 重定向

六、在src/layouts/Basilayout.js中获取处理后的菜单列表数据，在render()函数里面const menuData = this.getMenuData()这句，调取getMenuData方法，这里面经过this.props动态获取到datas,datas就是我处理后的菜单数据。

注意：若是原数据不是理想数据而又不处理，而是在这个getMenuData里处理，会发生一些意想不到的错误。

getMenuData() {
    const {
      datas,
      route: { routes },
    } = this.props;
    const newRoutes = [...datas, ...routes]
    return memoizeOneFormatter(Array.from([...newRoutes]));
  }

七、至此就结束了应该就能够完成了