qiankun手动加载子应用

// index.tsx
import { registerMicroApps, start } from 'qiankun'

(window as any).__POWERED_BY_QIANKUN_PARENT__ = true

// 如果已使用qiankun，则主应用不需要以下配置
const childApps = [{
  name: 'child-app',
  entry: '//localhost:8000',
  container: '#root',
  activeRule: '/sub/test'
}]

registerMicroApps(childApps)

start()

// App.tsx
const Test = lazy(() => import("@/views/test"));

<Switch>
  ...
  <Route component={Test} path={`/sub/test`} exact></Route>
</Switch>

// child.tsx
// 子应用加载子应用，替换iframe
import {FC, useCallback, useEffect, useRef} from 'react'
import { loadMicroApp } from 'qiankun' 

const Child:FC = () => {
  const Ref = useRef(null)
  const handleLoadApp = useCallback(() => {
        return loadMicroApp({
            name: 'child-app,
            entry: //localhost:8000',
            container: Ref.current!,
            props: {
                store: {}
            }
        })
    }, [store])
  
useEffect(() => {
  const microApp = handleLoadApp()
  microApp.mountPromise.then(() => {
        console.log('加载成功')
  }).catch(() => {
        console.log('加载失败')
  }).finally(() => {
        console.log('finally')
  }) 
  /**
   * 切换页面会引发 element 不存在问题
   * 可使用 react-keepalive-router 缓存当前组件解决
  */
  // return () => {
    // 卸载子应用
    // !!microApp && microApp.unmount()
  // }
},[handleLoadApp])

  return <div ref={Ref} />
}

如果是路由级别的嵌入，最后需要应用之间统一路由模式，反之不需要。
切换路由可能导致styled-components自定义样式，子应用需要包裹一下

// 子应用index.tsx
...
ReactDOM.render(
  <StyleSheetManager disableCSSOMInjection>
    <BrowserRouter basename="/">
      ....
    <BrowserRouter>
  </StyleSheetManager>
)