nmi页面头部尾部在路由集成

zackor_

已于 2022-04-01 15:45:30 修改

阅读量422

点赞数

分类专栏：学习实习问题解决文章标签：前端 react

于 2022-04-01 15:44:20 首次发布

本文链接：https://blog.csdn.net/zackor_/article/details/123899416

版权

学习同时被 3 个专栏收录

16 篇文章 0 订阅

订阅专栏

实习

3 篇文章 0 订阅

订阅专栏

问题解决

2 篇文章 0 订阅

订阅专栏

《头部尾部在路由集成》
-----------------------------recored------------------------------------
umi头部尾部集成于路由使用ReactNode
把头部和尾部单独提出来再放到layout布局里：
好处：可以不在每个页面添加<Head></Head>和<Footer></Footer>代码更清晰；若是只是单独抽头部和尾部的组件每个页面还需要写。

例如集成于首页的路由中：

layout：
type HomeProps = {
  children: ReactNode;
};
const Index: React.FC<HomeProps> = (props) => {
  return (
    <div className={Styles.layoutStyles}>
      <HeaderMenu></HeaderMenu>
      <div className={Styles.frontContent}>{props.children}</div>
      <Footer></Footer>
    </div>
  );
};

umirc.ts:
routes: [
    {
      path: '/home',
      layout: false,
      component: '../layouts',
      routes: [
        { path: '/home', redirect: '/home/index' },
        { path: '/home/index', component: './Home', name: '首页' },
      ],
    },
  ],

antd-pro 也是这样的有单独的layout可以使用，所以直接使用antd-pro那一套是可以直接用，但是这一套比较死，不太能改成项目需要的，或者很麻烦，还不如使用umi来写，antd是在umi的基础上再封装的一层，所以使用umi也能用antd的组件，有时候就比较灵活。

zackor_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
nmi页面头部尾部在路由集成

《头部尾部在路由集成》-----------------------------recored------------------------------------umi头部尾部集成于路由使用ReactNode把头部和尾部单独提出来再放到layout布局里：好处：可以不在每个页面添加<Head></Head>和<Footer></Footer>代码更清晰；若是只是单独抽头部和尾部的组件每个页面还需要写。例如集成于首页的路由中：layout：t
复制链接

扫一扫