『Umi』全局布局文件：打造统一页面布局

原创

程序员 NEO

修改于 2024-12-29 21:28:40

10500

代码可运行

文章被收录于专栏：『Ts + React』项目实战『Ts + React』项目实战

运行总次数：0

代码可运行

一、前言

🐤本篇文章是『从零玩转 TypeScript + React 项目实战』系列文章的第 12 篇，《全局布局文件：打造统一页面布局》

好，那么开始，经过上一篇文章的介绍，在 Umi 中如何手动的配置路由，了解完了如何在 Umi 中手动的配置路由之后，在这篇文章中我将会给大家介绍如何在 Umi 中实现路由的跳转。

二、路由跳转

在 Umi 中如何实现路由跳转呢？在实现路由跳转之前，有个知识点要给大家补充一下，什么知识点呢？

三、全局布局文件

什么是全局布局文件呢？全局布局文件就是给 pages 目录下面所有的组件都添加一个公共的父组件，这个呢，就称之为全局布局文件。

这个布局文件怎么添加呢？回到 Umi 的官方网站，网站地址不贴大家可以自行搜索，找到『文档』，在『文档』中找到『目录结构』：

在『目录结构』中，找到 src，在 src 下面有 pages 除了 pages 以外，还有一个 layouts 的这么一个目录，这个目录下面有一个 index.tsx（js）文件，这个 index.tsx（js）文件就是用来干什么的？就是用来定义组件的，这个 index.tsx（js）定义的组件将来就会成为 pages 下面所有组件的父组件。

所以，我们需要做的就是回到自己项目当中，在根目录下面新建一个 layouts 目录，然后在 layouts 目录下面新建一个 index.tsx（js）文件：

在 index.tsx（js）文件中，我们定义一个组件，首先导入 React：

import React from 'react';

然后通过 export default 导出一个组件，需要返回这个组件的结构：

export default () => {
    return (
        <div>头部</div>
        <div>内部</div>
        <div>底部</div>
    )
}

发现了什么问题？这个问题是什么呢？这个问题就是，我们在一个组件中只能返回一个根节点，但是这里我们返回了三个根节点，所以这个时候我们需要用一个根节点将这三个根节点包裹起来，我这里采用 fragment 的方式，来解决这个问题：

export default () => {
    return (
        <>
            <div>头部</div>
            <div>内部</div>
            <div>底部</div>
        </>
    )
}

我分别添加了头部、内部、底部三个 div，为了能够更好的区分出头部内容和底部，我是不是可以设置一下样式，在 layouts 目录下面新建一个 index.css 文件，然后在 index.css 文件中写入一个 .header 的样式，宽度百分百，高度 40px，背景颜色为 red，再写入一个 .main 宽度是 100%，高度是 auto，padding 上下各为 50px，背景颜色为 skyblue，再写入一个 .footer 宽度百分百，高度 80px，背景颜色 green。

.header {
    width: 100%;
    height: 40px;
    background: red;
}
.main {
    width: 100%;
    height: auto;
    padding: 50px;
    background: skyblue;
}
.footer {
    width: 100%;
    height: 80px;
    background: green;
}

然后在 index.tsx（js）文件中引入 index.css 文件，通过模块化的方式引入：

import Style from './index.css';

然后在 div 标签上面添加一个 className 属性，头部的 className 为 styles.header，内部的 className 为 styles.main，底部的 className 为 styles.footer：

export default () => {
    return (
        <>
            <div className={Style.header}>头部</div>
            <div className={Style.main}>内部</div>
            <div className={Style.footer}>底部</div>
        </>
    )
}

还没完，定义好这个组件之后，定义这个组件的目的是什么？目的是不是要把 pages 当中的所有组件都包裹在这个组件当中，那么怎么去包裹呢？就是将 pages 下面的组件都作为我现在定义的这个组件的子组件渲染出来，渲染到什么地方呢？我就给它渲染到内容的地方：

如果渲染到内容的 div 中，那么我怎么拿到 pages 的组件呢？也非常的简单，Umi 呢会通过一个 props 给我们传递进来，传进来之后呢，我们只需要写上 props.children 就可以将 pages 下面的所有组件都渲染到这个 div 中：

export default (props) => {
    return (
        <>
            <div className={Style.header}>头部</div>
            <div className={Style.main}>{props.children}</div>
            <div className={Style.footer}>底部</div>
        </>
    )
}

所有内容都编写好了，重启项目 npx umi dev，然后访问 http://localhost:8000，我这里需要注意一下，将上一节文章所介绍编写的 .umirc.ts(js) 文件删掉（原因非常的简单，因为当我直接输入 IP + 端口号的时候，访问的路由地址为 /，我想先将之前打乱的路由规则去掉，然后访问 / 的时候就是 index.js 组件，那么我 layouts 中有一个 index.js，pages 中也有一个 index.js，那么我访问 / 的时候，就会先访问 layouts 中的 index.js，然后再访问 pages 中的 index.js）：

上图就是本次所展示的效果，layouts 中的 index.js 与 pages 下的 index.js 都展示出来了。因为网页展示了头部底部文字都展示出来了，Page index 也展示出来了，pages 下面的 index.js 组件展示没有问题了，接下来来看看其它的组件，再浏览器中访问 http://localhost:8000/home：