umijs / qiankun

📦 🚀 Blazing fast, simple and complete solution for micro frontends.
https://qiankun.umijs.org
MIT License
15.77k stars 2.01k forks source link

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

Open wuhanjun opened 7 months ago

wuhanjun commented 7 months ago

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

kuitos commented 7 months ago

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

wuhanjun commented 7 months ago

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

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

wuhanjun commented 7 months ago

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

908080 commented 7 months ago

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

heyden-suimu commented 6 months ago

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

shijunfeng commented 5 months ago

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

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

llkang commented 2 months ago

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

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

你把主应用中\<router-view :key="key"/>的key删掉看看。