Jump to content

基于umi-钱坤子应用程序的渲染空白解决方案


Recommended Posts

复现版本

umi@3.1.4

@ umijs/plugin-钱坤@2.2.0

子应用程序呈现空白的情况很多。这里,浏览器返回导致空白。

一开始我以为某一步是错的,后来发现是钱坤的Bug,应该以后再修复。在修复之前,我不得不黑自己。

先看问题,录gif。

pohy3xlo2wz1506.gif

复制步骤:

在子应用程序页面上刷新一次。

子应用程序单击可跳转的链接。

单击浏览器左上角的-return进行重现。

问题原因

这个问题的原因也很奇妙。第一次加载时,只有当它是子应用程序时才会被触发。如果是父应用程序的页面,就不会有这个问题。浏览器后退按钮需要被触发。

解决方案

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

1.创建一个新的空白页,这里命名为Blank.jsx。

2.跳转到布局中的Blank.jsx页面。

3.加载Blank.jsx并返回到上一层。

Blank.jsx的代码如下。

从“react”导入{ useEffect };

导出默认函数空白({历史记录}){ 0

useEffect(()={ 0

history . goback();

}, []);

返回null

}

跳转布局,伪代码:

从“React”导入React;

类App扩展了React。组件{

componentDidMount(){ 0

this . props . history . push('/blank ');

}

}

因为Blank.jsx不渲染DOM,所以没有任何划痕。

解决后的效果:

qtchlirvgku1507.gif

原文链接:https://www.xiejiahe.com/blog/detail/5ede2998bf0177330788adab

Link to comment

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

极客研究所

geekfooer.png.cea50058ddf1c8276491a8b29ec21205.png

GEEK.AC.CN 极客论坛,推动中国极客文化发展,建设全面网络科技体系,共同学习与成长。

Panel Title #2

痛苦本身可能是很多痛苦,但主要的原因是痛苦,但我给它时间像一些巨大的痛苦和痛苦一样陷入其中。为了让最少的人到来,除了从中获得目标之外,我们还可以进行任何劳动学派。

Home
Search
Existing user? Sign In
×
×
  • Create New...

Important Information

Dear visitors, please read and agree to our website rules before visiting our website!Guidelines