踩坑记录（umiJs 4.x 版本-自定义布局）

背景

我要实现一个根据路由渲染自定义布局 按照之前的3.X版本，混合布局是根据props的children属性再来进一步绘画的，但是在4.X版本官网说到从props中已经不能再获取到children等属性

官方替换 Outlet

import React from 'react';
+ import { Outlet } from 'umi';
export default function Layout(props) {
  return (
    <div>
-      { props.children }
+      <Outlet />
    </div>
  );
}

自己的Demo代码

src/layouts/index.tsx

import { Outlet, useLocation } from 'umi';
import FirstScreen from './FirstScreen';

export default function () {
  const location = useLocation();
  if (location.pathname === '/') {
    // 默认首页
    return <FirstScreen />;
  }

  return (
    <div>
      <h1>公共头</h1>
      <Outlet />
    </div>
  );
}

路由配置

export default [
  {
    path: '/',
    component: '@/layouts/index',
    routes: [{ path: '/home', component: 'home' }],
  },
];

出现问题

按照上面实现，首页的渲染是正常的。但是混合布局界面使用Outlet出现了问题,layout重复输出html结构,出现两个公共头。

原因及解决方法

原因

按照约定，layouts/index.tsx 是所有页面公有的布局, 然后又在路由配置中写了一层@/layouts/index

解决方法

我是直接把路由配置中的一个布局配置去掉了

export default [
    { path: '/home', component: 'home' }
];

这样，渲染就没有问题了

拓展

解决办法应该是还有的,欢迎大牛在评论区指导。