复现版本
- 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 所以没有任何擦觉。
解决后的效果: