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

松山湖网站