---
title: "在 UmiJS 中使用布局"
date: 2021-05-13T21:45:30.000Z
author: Z.SHINCHVEN
tags: [UmiJS, React]
canonical: https://atlassc.net/2021/05/14/layouts-in-umijs
---
[UmiJS](https://umijs.org/) 的路由系统中对[布局](https://umijs.org/zh-CN/docs/routing#routes) （routes based
layout）有着良好地支持，你可以将页面共用的组件封装在 layouts 文件中，然后通过默认或者手动配置根据路由套用在不同的页面上。

## 布局文件

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

根据 React
的[组件继承](https://reactjs.org/docs/composition-vs-inheritance.html)的设计，组件需要通过包裹 [ReactChildren](https://reactjs.org/docs/composition-vs-inheritance.html#containment)
来加载子组件。

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

```tsx
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 的配置文件中启用了路由配置，那么你可以通过嵌套配置路由在指定布局。

```tsx
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'}, // 第二个页面使用同一个布局
            ]
        },
    ],
});
```