umijs 开启mpa后，如何配置layout

UmiJS 是一个可插拔的企业级前端应用框架，它基于 React。在 UmiJS 中开启 MPA（多页应用）后，可以通过配置来实现布局（layout）。

要在 UmiJS 中为 MPA 配置 layout，你需要进行以下步骤：

1. 创建 layout 组件：首先你需要创建一个或多个 React 组件作为 layout。通常，这个组件会包含一些共用的部分，如头部、导航栏、侧边栏和页脚等。

// src/components/Layout/index.js
import React from 'react';
import Header from './Header';
import Sider from './Sider';
import Footer from './Footer';

const Layout = ({ children }) => (
  <div>
    <Header />
    <Sider />
    <div style={{ padding: 20 }}>{children}</div>
    <Footer />
  </div>
);

export default Layout;

2. 配置路由：在路由配置文件中，你需要指定每个页面使用哪个 layout 组件。在 UmiJS 中，可以通过 `layout` 属性来指定。如果你想要全局使用一个 layout 组件，可以在 `config/config.js` 中的 `routes` 配置里指定；如果想要针对特定页面指定不同的 layout，可以在页面文件夹下的路由配置文件中指定。

// src/pages/index.js
export default {
  // ...其他配置
  layout: 'BasicLayout', // 指定该页面使用 BasicLayout 布局组件
};

3. 配置全局 layout：如果你想要在全局范围内应用同一个 layout，可以在 `config/config.js` 文件中对 `routes` 进行配置。

// config/config.js
export default {
  // ...其他配置
  routes: [
    {
      path: '/',
      component: '../layouts/BasicLayout', // 指定全局使用的 layout 组件路径
      routes: [
        // ...页面路由配置
      ],
    },
    // ...其他路由配置
  ],
};

通过以上步骤，你可以在 UmiJS 中开启 MPA 后配置 layout，使得每个页面或页面组都拥有统一的布局结构。