Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

父应用切换路由后再切回子应用对应的路由,渲染空白 #2907

Open
wuhanjun opened this issue Feb 20, 2024 · 6 comments
Open

Comments

@wuhanjun
Copy link

wuhanjun commented Feb 20, 2024

What happens?

父应用切换路由后再切回子应用对应的路由,渲染空白

How To Reproduce

父子均为React项目,父应用普通项目,子应用umi4(子应用会再加载一个孙子应用,但需要一些用户做一些操作。),都是BrowserRouter,使用loadMicroApp方式加载

export const DataFinder = () => {
  const divRef = useRef<HTMLDivElement>()
  const appRef = useRef<MicroApp>()
  const [loading, setLoading] = useState(true)
  const initRef = useRef(false)

  useEffect(() => {
    if (initRef.current) {
      return
    }

    initRef.current = true
    appRef.current = loadMicroApp({
      name: MicroAppEnum.DataFinder,
      entry: getMicroApp(MicroAppEnum.DataFinder).entry,
      container: divRef.current,
    })
    appRef.current.mountPromise.then(() => {
      setLoading(false)
    })
  }, [])

  useEffect(() => {
    return () => {
      appRef.current.unmount()
    }
  }, [])

  return (
    <Spin spinning={loading} wrapperClassName={styles.spin}>
      <div className={styles.chatDiaWrapper} ref={divRef}></div>
    </Spin>
  )
}

第二次切换到对应路由后的节点
image
且观察到第二次子应用内console.log也有打印,但是不渲染内容。

其他
第一次加载子应用发现的一些警告
single-spa minified message #41: See https://single-spa.js.org/error/?code=41
single-spa minified message #1: See https://single-spa.js.org/error/?code=1

Context

  • qiankun Version: 2.10.16
  • Browser Version: chrome 121.0.6167.184
@kuitos
Copy link
Member

kuitos commented Feb 20, 2024

这种就是应用自己的路由没匹配上,导致根节点是空的,qiankun 的流程已经正常执行结束了

@wuhanjun
Copy link
Author

wuhanjun commented Feb 20, 2024

这种就是应用自己的路由没匹配上,导致根节点是空的,qiankun 的流程已经正常执行结束了

指的是子应用的路由没有匹配上吗?我理解应该是匹配上了。因为子应用内路由对应的组件代码已经在执行,我console.log试过。而且路由没有变化,第一次能匹配上,第二次怎么会没有匹配上呢。

@wuhanjun
Copy link
Author

找到原因了,是umi@4.0.33的问题,我准备搞个仓库用于你们复现,期间安装umi@4.1.1后没有这个问题了。

@908080
Copy link

908080 commented Mar 6, 2024

用的umi max 4.1.1 dependencies "umi": "4.1.1",也有这个问题

@heyden-suimu
Copy link

我也碰到类似的问题: 通过路由切换子应用时,会触发子应用的mount和unmount ,但是浏览器返回/前进路径时,不会触发mount和unmount 钩子 ,如何解决哇?

@shijunfeng
Copy link

我也碰到类似的问题: 通过路由切换子应用时,会触发子应用的mount和unmount ,但是浏览器返回/前进路径时,不会触发mount和unmount 钩子 ,如何解决哇?

我也遇到这个问题 多个子应用路由切换时不会触发mount,刷新可以,你解决了吗

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants