【 React Ant Design Pro 路由配置】

React Ant Design Pro 路由配置

前言

antdPro v5 的router主要使用了umijs v2的路由routes 以及@umijs/plugin-layout，总的来说，非常好用。在快速搭建项目的过程中，我们不需要去关注菜单和面包屑等功能的细节。在工程目录的config中直接配置一下路由就完了。（注意：约定路由和配置路由只能二选一）routes位置如下图示

路由配置的参数

//config/route.ts
export const routes: IBestAFSRoute[] = [
  {
    path: '/welcome',
    component: 'IndexPage',
    name: '欢迎', // 兼容此写法
    icon: 'testicon',
    // 更多功能查看
    // https://beta-pro.ant.design/docs/advanced-menu
    // ---
    // 新页面打开
    target: '_blank',
    // 不展示顶栏
    headerRender: false,
    // 不展示页脚
    footerRender: false,
    // 不展示菜单
    menuRender: false,
    // 不展示菜单顶栏
    menuHeaderRender: false,
    // 权限配置，需要与 plugin-access 插件配合使用
    access: 'canRead',
    // 隐藏子菜单
    hideChildrenInMenu: true,
    // 隐藏自己和子菜单
    hideInMenu: true,
    // 在面包屑中隐藏
    hideInBreadcrumb: true,
    // 子项往上提，仍旧展示,
    flatMenu: true,
  },
];

进入正题路由配置

一级菜单

 {
   name: 'test',
   icon: 'smile',
   path: '/test',
   component: './Test', // 该组件是 相对于 pages 目录
 },

一级菜单，包含两个二级菜单

{
  name: 'test',
  icon: 'smile',
  path: '/test',
  component: './test/Index', // 该组件是 相对于 pages 目录
  routes: [
    {
      name: 'children',
      path: '/test/children',
      component: './test/Children',
    },
    {
      name: 'children2',
      path: '/test/children2',
      component: './test/Children2',
    },
  ]
},

一级菜单，两个子路由，只显示一个子菜单

{
  name: 'test',
  icon: 'smile',
  path: '/test',
  component: './test/Index', // 该组件是 相对于 pages 目录
  routes: [
    {
      name: 'children',
      path: '/test/children',
      component: './test/Children',
      hideInMenu: true // 在菜单列表中隐藏子路由
    },
    {
      name: 'children2',
      path: '/test/children2',
      component: './test/Children2',
    },
  ]
},

一级菜单，两个子路由，隐藏所有子菜单，但是默认设置第一个子路由为主菜单页面

{
  name: 'test',
  icon: 'smile',
  path: '/test',
  routes: [
    {
      path: '/test/children',
      component: './test/Children',
    },
    {
      name: 'children2',
      path: '/test/children2',
      component: './test/Children2',
    },
  ]
},

一级菜单，多层子菜单嵌套

{
  name: 'test',
  icon: 'smile',
  path: '/test',
  hideChildrenInMenu: true, // 隐藏所有子菜单
  routes: [
    {
      name: 'children',
      path: '/test/children',
      component: './test/Children',
      routes: [
        {
          name: 'children',
          path: '/test/children',
          component: './test/Children',
        },
        {
          name: 'children2',
          path: '/test/children2',
          component: './test/Children2',
        },
      ]
    },
    {
      name: 'children2',
      path: '/test/children2',
      component: './test/Children2',
    },
  ]
},

最后

希望这篇博客可以帮助到初次使用Ant Design Pro管理系统的朋友
附上Ant Design Pro路由跳转链接