基于 umi-qiankun 子应用渲染空白解决方案

发表于:2020-06-08

复现版本

  • umi@3.1.4
  • @umijs/plugin-qiankun@2.2.0

子应用渲染空白情况有很多种情况, 这里说的是 浏览器返回 导致空白。

一开始以为是某个步骤错了, 后来发现是 qiankun 的Bug, 后面应该会修复, 没修复之前只能自己 hack 了。

先看问题,录制了 gif

复现步骤:

  • 在子应用页面刷新一次
  • 子应用点击一个可跳转的链接
  • 浏览器左上角点击 <- 返回即可复现

问题原因

导致这个问题的原因也奇葩, 首次加载的时候如果是子应用才会触发, 如果首次加载是父应用的某一个页面就没有这个问题。并且需要触发浏览器回退按钮。

解决方案

原因找到了, 解决方案很简单, 思路:

  • 1、新建一个空白页面,这里命名为 Blank.jsx
  • 2、在 Layout 跳转到 Blank.jsx 页面
  • 3、加载 Blank.jsx 再返回上一层

Blank.jsx 代码如下

import { useEffect } from 'react';

export default function Blank({ history }) {
  useEffect(() => {
    history.goBack();
  }, []);

  return null;
}

Layout 中进行跳转,伪代码:

import React from 'react';

class App extends React.Component {
  componentDidMount() {
    this.props.history.push('/blank');
  }
}

因为 Blank.jsx 没有渲染DOM 所以没有任何擦觉。

解决后的效果:

React
原创文章,转载请注明出处。