antd pro5 踩坑之约定路由-登录界面显示菜单

约定式路由

约定式路由也叫文件路由，就是不需要手写配置，文件系统即路由，通过目录和文件及其命名分析出路由配置。 比如以下文件结构：

  └── pages
    ├── index.tsx
    └── users.tsx

会得到以下路由配置：

[
  { exact: true, path: '/', component: '@/pages/index' },
  { exact: true, path: '/users', component: '@/pages/users' },
]

动态路由

约定 [] 包裹的文件或文件夹为动态路由。 比如：

• src/pages/users/[id].tsx 会成为 /users/:id
• src/pages/users/[id]/settings.tsx 会成为 /users/:id/settings 举个完整的例子，比如以下文件结构：

.
  └── pages
    └── [post]
      ├── index.tsx
      └── comments.tsx
    └── users
      └── [id].tsx
    └── index.tsx

会生成路由配置：

[
  { exact: true, path: '/', component: '@/pages/index' },
  { exact: true, path: '/users/:id', component: '@/pages/users/[id]' },
  { exact: true, path: '/:post/', component: '@/pages/[post]/index' },
  {
    exact: true,
    path: '/:post/comments',
    component: '@/pages/[post]/comments',
  },
];

好了阅读了以上文档终于算是知道什么是约定路由了，然后我从接口获取了菜单数据结构，经过一番处理算是可以显示菜单了：

    menu: {
      // 每当 initialState?.currentUser?.userid 发生修改时重新执行 request
      params: {
        userId: initialState?.currentUser?.id,
      },
      // 接口获取菜单
      request: async (params, defaultMenuData) => {
        // initialState.currentUser 中包含了所有用户信息
        const currentMenu = await initialState?.fetchMenu?.();
        return currentMenu;
      },
    },

然而我发现登录页面也是显示菜单的，于是我各种百度，终于找到了一种方法：layout:false,试过后发现：约定式路由是没法控制登录路由的配置，于是继续找问题功夫不负有心人给我找到了:

    // 既然配置时无法修改，那我们在运行时修改就好了：
    // Login > index.tsx 在export Login之 前 
    Login.layout = false

完结撒花