Ant-design-pro: [求助] [V5] flatMenu菜单的第一级子菜单怎么显示面包屑？

[clkz]

🧐 问题描述

flatMenu：true菜单的第一级子菜单不会显示面包屑，二级菜单显示正常；

💻 示例代码

{
      path: '/admin',
      icon: 'crown',
      access: 'canAdmin',
      component: './Admin',
      name: 'admin',
      flatMenu: true,
      routes: [
        {
          path: '/admin/sub-page1',
          name: 'sub-page1',
          icon: 'smile',
          component: './Welcome',
        },
        {
          path: '/admin/sub-page2',
          name: 'sub-page2',
          icon: 'smile',
          routes: [
            {
              path: '/admin/sub-page2/1',
              name: 'sub-page-1',
              icon: 'smile',
              component: './Welcome',
            }
          ]
        },
      ],
    },

🚑 其他信息

我想一级子菜单的面包屑就显示一个名称，例如：menu.admin.sub-page1 ，请问需要怎么配置？

[chenshuai2144]

这个是不支持的，flatMenu 之后 menu 的源数据也被删掉了。
你的这个需求还是很常见的，有好的想法吗？

[F-loat]

打平后相当于只有一级菜单了，目前的逻辑会直接禁用面包屑，可以通过自定义 breadcrumbRender 来手动增加一级路由

// app.tsx
export const layout = ({
  initialState,
}: {
  initialState: { settings?: LayoutSettings };
}): BasicLayoutProps => {
  return {
    rightContentRender: () => <RightContent />,
    disableContentMargin: false,
    footerRender: () => <ApproveFooter />,
    breadcrumbRender: (routers) => {
      routers?.unshift({ path: '/', breadcrumbName: '首页' });
      return routers;
    },
    onPageChange: () => {},
    ...initialState?.settings,
  };
};

[renqi1996]

遇见了类似的问题；
不过我不是一级菜单不展示，而是二级没有展示；

config配置：

routes: [
    {
      path: '/',
      flatMenu: true,
      routes: [
        {
          path: '/',
          redirect: '/welcome',
        },
        {
          path: '/welcome',
          name: 'welcome',
          component: './Welcome',
          hideInMenu: true,
          menuRender: false,
        },
        {
          path: '/appManage',
          name: 'appManage',
          routes: [
            {
              path: '/appManage/appList',
              name: 'appList',
              component: './AppManage/appList',
            },
            {
              path: '/appManage/appEdit/:id?',
              name: 'appEdit',
              component: './AppManage/appEdit',
              exact: true,
            },
            {
              path: '*',
              component: './404',
            }
          ]
        },
        {
          path: '/serviceManage',
          name: 'serviceManage',
          routes: [
            {
              path: '/serviceManage',
              name: 'serviceList',
              component: './AppManage/appList',
            },
            {
              path: '*',
              component: './404',
            }
          ]
        },
        {
          path: '*',
          component: './404',
        }
      ]
    },
    {
      path: '*',
      component: './404',
    }
  ],

效果：

@chenshuai2144 请教一下解决方法，服务上面的应用模块都是正常的，但是从服务开始，后面新增的部分都没有面包屑了;除此之外，点击左侧菜单进行跳转的时候，会有很明显的卡顿和刷新展示，请问如何解决？

[chenshuai2144]

@renqi1996 试试修改 menu={{loading:boolean}}，这样会触发layout 重新进行计算

[renqi1996]

@renqi1996 试试修改 menu={{loading:boolean}}，这样会触发layout 重新进行计算

请问在哪里加呢？config.ts中和app.tsx的layout中都找不到加这句代码的地方 @chenshuai2144