umi4 使用ProLayout 路由配置

在 umijs 4 中，使用 ProLayout 配置路由可以通过如下步骤：

1. 安装依赖

yarn add @ant-design/pro-layout

2. 在路由配置文件中引入 ProLayout 组件，并使用它来渲染路由组件

import ProLayout from '@ant-design/pro-layout';

export default function(props) {
  return (
    <ProLayout>
      { props.children }
    </ProLayout>
  )
}

在这个例子中，我们直接将 ProLayout 当做路由组件渲染，props.children 表示路由匹配到的组件。

3. 在路由配置文件中配置路由

export default [
  {
    path: '/login',
    component: '@/pages/login',
  },
  {
    path: '/',
    component: '@/layouts/BasicLayout',
    routes: [
      {
        path: '/',
        component: '@/pages/index',
      },
      {
        path: '/user',
        icon: 'UserOutlined',
        name: 'user',
        routes: [
          {
            path: '/user/list',
            name: 'list',
            component: '@/pages/user/list',
          },
          {
            path: '/user/edit/:id',
            name: 'edit',
            component: '@/pages/user/edit',
          },
        ],
      },
    ],
  },
];

在这个例子中，我们将 ProLayout 组件当做路由组件，然后在它的 props.children 中嵌套子路由。子路由的配置与普通路由配置相同，只是可以额外配置 icon 和 name 属性，用于在 ProLayout 中渲染菜单。

注意，ProLayout 默认会渲染菜单，如果想要禁用菜单，可以设置 menuRender 属性为 false。

<ProLayout menuRender={false}>
  { props.children }
</ProLayout>

以上就是在 umijs 4 中使用 ProLayout 配置路由的方法。