ant design pro 详情页面包屑保持路由层级并显示,菜单不显示

ant design pro 详情页面包屑保持路由层级并显示,菜单不显示

新项目中使用antd-pro框架,所以接下来会写一些关于antd-pro的踩坑

详情页(修改页/添加页)和列表页在路由层级上通常是处在同一层的,这样可以渲染在同一位置,但是在面包屑的展示上给用户的感觉是详情页应该在列表页的下面,在antd-pro项目中并没有直接的方法,所以需要对menu.js文件做一下修改,下面是实现:

 //角色管理模块的路由
 routes: [
 	//角色列表
     {
         path: '/user/role',
         name: 'role',
         locale: 'menu.user.role',
         component: './User/Role',
     },
     //角色添加
     {
         path: '/user/role/role-add',
         name: 'role-add',
         hideInMenu: 'true', //添加页不需要在menu上显示
         component: './User/RoleAdd',
     },
     //角色修改
     {
         path: '/user/role/role-mod/:id',
         name: 'role-mod',
         hideInMenu: 'true',
         component: './User/RoleMod',
     },
]

//在src/locales/menu.js中添加面包屑和列表的名称
  'menu.user.role': '角色管理',
  'menu.user.role-add': '角色添加',
  'menu.user.role-mod': '角色修改',
  
  
 //因为添加和修改页都加了hideInMenu属性,导致面包屑也不显示了,所以在src/models/menu.js上做修改
 
  effects: {
    *getMenuData({ payload }, { put }) {
      const { routes, authority } = payload;
      const menuData = filterMenuData(memoizeOneFormatter(routes, authority));
       // const breadcrumbNameMap = memoizeOneGetBreadcrumbNameMap(menuData); 这是原来的代码
         const breadcrumbNameMap = memoizeOneGetBreadcrumbNameMap(memoizeOneFormatter(routes, authority)); //这是修改后的代码,因为menuData是已经过滤掉存在hideInMenu
      yield put({
        type: 'save',
        payload: { menuData, breadcrumbNameMap },
      });
    },

这样面包屑就可以直接完美显示层级了

你可能感兴趣的:(react,ant,design,ant,design,pro,前端笔记,解决问题,ant-design,ant,design,pro)