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

七、至此就結束了應該就能夠完成了