在 UmiJS 中使用布局

UmiJS 的路由系统中对布局 （routes based layout）有着良好地支持，你可以将页面共用的组件封装在 layouts 文件中，然后通过默认或者手动配置根据路由套用在不同的页面上。

布局文件

布局文件一般存在src/layouts文件夹中，默认布局文件为src/layouts/index.tsx。

根据 React 的组件继承的设计，组件需要通过包裹 ReactChildren 来加载子组件。

因为你的布局文件应该像这样：

import React, {ReactChildren} from "react";

interface MainLayoutProps {
    children: ReactChildren
}

export default function MainLayout(props: MainLayoutProps) {
    return (
        <div>
            {props.children}
        </div>
    );
}

通过路由加载布局

文件路径映射路由

如果你没有启用 UmiJS 的配置文件（.umirc.ts），UmiJS 将通过 pages 文件夹下的组件文件路径来映射路由，在这个模式下所有页面默认使用 src/layouts/index.tsx这个文件中的组件为布局。

在配置文件根据路由指定配置文件

如果你在 UmiJS 的配置文件中启用了路由配置，那么你可以通过嵌套配置路由在指定布局。

import {defineConfig} from 'umi';

export default defineConfig({
    routes: [
        {
            path: '/admin/', component: '@/layouts/admin', // 父级为布局
            routes: [
                {path: '/admin', component: '@/pages/admin/index'}, // 下属 页面 可以跟 布局 保持一样的 path
                {path: '/admin/users', component: '@/pages/admin/users'}, // 第二个页面使用同一个布局
            ]
        },
        { // 从 root（`/`） 开始的布局应该放置在其他布局后面
            path: '/', component: '@/layouts/index', // 父级为布局
            routes: [
                {path: '/', component: '@/pages/index'}, // 下属 页面 可以跟 布局 保持一样的 path
                {path: '/second', component: '@/pages/second'}, // 第二个页面使用同一个布局
            ]
        },
    ],
});