umi 导航菜单的空白页问题

主思路

routes里的上级菜单必须设定path，否则下一个二级菜单会出现空白页。

详情

umi的导航菜单是在 config/routes.ts 里设定的，比如：

export default [
  {
    name: 'home',
    path: '/home',
    component: './Home',
  },
  {
    name: 'test1',
    routes: [
      {
        path: '/test1/subtest1',
        name: 'subtest1',
        component: './subtest1',
      },
    ],
  },
  {
    name: 'test2',
    routes: [
      {
        path: '/test2/subtest2',
        name: 'subtest2',
        component: './subtest2',
      },
    ],
  },    
];

显示很正常，但点击 subtest2 的时候会有问题，显示一个空白页，但并没有其他错误。经过替换法，发现父菜单没有 path 导致的这个问题。

正确的routes.ts是这样的

export default [
  {
    name: 'home',
    path: '/home',
    component: './Home',
  },
  {
    name: 'test1',
    path: '/test1',
    routes: [
      {
        path: '/test1/subtest1',
        name: 'subtest1',
        component: './subtest1',
      },
    ],
  },
  {
    name: 'test2',
    path: '/test2',
    routes: [
      {
        path: '/test2/subtest2',
        name: 'subtest2',
        component: './subtest2',
      },
    ],
  },    
];

总结

原始的替换法在比较极端的情况下还是有用的，umi还是有一些隐藏的坑，如果遇到类似的问题可以从antd pro生成一个标准的project，然后用替换法来检查哪里有问题。文档可能没这么全，甚至log也未必会有。

参考

umi 路由 路由

antd pro 新增页面 - Ant Design Pro

菜单的高级用法 - Ant Design Pro