// index.tsx
import { registerMicroApps, start } from 'qiankun'
(window as any).__POWERED_BY_QIANKUN_PARENT__ = true
// 如果已使用qiankun，則主應(yīng)用不需要以下配置
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
// 子應(yīng)用加載子應(yīng)用杉武，替換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')
})
/**
* 切換頁面會(huì)引發(fā) element 不存在問題
* 可使用 react-keepalive-router 緩存當(dāng)前組件解決
*/
// return () => {
// 卸載子應(yīng)用
// !!microApp && microApp.unmount()
// }
},[handleLoadApp])
return <div ref={Ref} />
}
如果是路由級別的嵌入辙诞，最后需要應(yīng)用之間統(tǒng)一路由模式，反之不需要轻抱。
切換路由可能導(dǎo)致styled-components自定義樣式飞涂，子應(yīng)用需要包裹一下
// 子應(yīng)用index.tsx
...
ReactDOM.render(
<StyleSheetManager disableCSSOMInjection>
<BrowserRouter basename="/">
....
<BrowserRouter>
</StyleSheetManager>
)
