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 —(下面代码的关键字是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
      })
    },
  },

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

3、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的方法进行格式化将后台返回的数据处理成类似理想状态的格式，
类似于 —(下面代码的关键字是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
            }
        ]
    },
]

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

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

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

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

6、在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]));
  }

7、至此就结束了应该就可以完成了