2022.8.14 qiankun

74 阅读1分钟

image.png

主应用中注册子应用

主应用中index.js中配置子应用信息 image.png

主应用中App.js中写挂载点 image.png

entry是端口号
container是主应用中的挂载点
activeRule是主应用中对应子应用的路由
主应用
1.需要安装qiankun
2.需要在index.js中注册子应用,配置子应用信息

image.png

子应用
不需要额外安装任何其他依赖即可接入qiankun主应用
但是
1.需要安装qiankun
2.需要在根目录下加入public-path.js,并加入代码,且在index.js中引入(静态资源展示问题解决)
3.需要同时需要在index.js中导出相应的生命周期钩子
具体可见https://qiankun.umijs.org/zh/guide/tutorial#react-%E5%BE%AE%E5%BA%94%E7%94%A8

image.png

主应用给子应用传值

image.png

子应用在mount生命周期中获取值
其他父子应用通信方式见官方文档

image.png image.png

子应用配置路由前缀
即访问子应用路由的前缀