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

布局文件

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
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 的配置文件中启用了路由配置,那么你可以通过嵌套配置路由在指定布局。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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'}, // 第二个页面使用同一个布局
]
},
],
});