Ant Design Pro【面包屑导航】二级路由和三级路由都有component的情况，三级不显示component的页面，怎么解决？

Ant Design Pro官网当中没有给出二级路由的页面和三级路由的页面同时展示的解决办法，而我们的需求是要加上面包屑导航，展示二级和三级的页面。
我的解决办法如下（期待更好的办法）

 // \config\routes.ts
export default [
//这是能够进行左侧边栏展示的
  {
    name: '用户管理',
    path: '/users',
    routes: [
      {
        path: '/users',
        redirect: '/users/usermanege',
      },
      {
        path: '/users/usermanege', //这个二级路由对应下边的三级路由名称
        name: '员工管理',
        component: './UserManagement/index',
      },
      {
        path: '/users/cusermanege/list',
        name: '客户管理',
        component: './CuserManagement',
      },
    ],
    access: 'admin' //admin权限
  },
  {
    name: '员工管理',
    path: '/users/usermanege', //在这里添加三级的路由
    flatMenu: true,  //官方的属性：扁平式分布
    routes: [
      {
        path: '/users/usermanege/add',
        name: '添加用户',
        hideInMenu: true, //官方的属性：在菜单中隐藏掉
        component: './UserManagement/add',
      },
      {
        path: '/users/usermanege/edit',
        name: '修改用户',
        hideInMenu: true, //官方的属性：在菜单中隐藏掉
        component: './UserManagement/add',
      }
    ],
    parentKeys: ['/users'],  // 父级属性
    access: 'admin'
  },
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

面包屑导航:
官方给出组件。根据路由自动进行匹配

import { ProBreadcrumb } from '@ant-design/pro-components';
export const layout()=>{
	return { 
	// 官方展示在这个位置添加属性
	 // headerContentRender: () => {
     // 	return <>
    //	},
    
   	//根据需求需要在内容上方添加
   	childrenRender: (children) => {
      // if (initialState?.loading) return ;
      return (
        <>
        <ProBreadcrumb style={{marginBottom:20}}/>
          {children}
        </>
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18