本文主要是介绍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'},
]
面包屑导航:
官方给出组件。根据路由自动进行匹配
import { ProBreadcrumb } from '@ant-design/pro-components';
export const layout()=>{return { // 官方展示在这个位置添加属性// headerContentRender: () => {// return <><ProBreadcrumb /></>// },//根据需求需要在内容上方添加childrenRender: (children) => {// if (initialState?.loading) return <PageLoading />;return (<><ProBreadcrumb style={{marginBottom:20}}/>{children}</>}
}
这篇关于Ant Design Pro【面包屑导航】二级路由和三级路由都有component的情况，三级不显示component的页面，怎么解决？的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
