我们用main做主应用,micro做子应用,按照我们的api,子应用只需要配置一个register就可以引入子应用了
其中子应用需要调出webpack配置,create-react-app默认是不允许手动配置的,使用命令就可以了
进入micro-app的文件夹目录运行(create-react-app也有overload的办法更改配置,这里为了方便直接用命令调出来):
这样项目的准备工作就做好了。
子应用配置
配置子应用两个步骤,一个是生命周期的配置。 我们把生命周期函数写好放到main.js中:
然后我们把reactDom.render放到mount生命周期里调用,让qiankun在准备好加载mount的时候再去初始化应用:
unmount的注销操作也不能忘记:
我们更改一下子应用的根节点id,在父应用中再去引用它(不要忘了html里也需要更改):
最后再把webpack中的配置修改一下:
1、修改devserver支持cors 修改端口
headers: { 'Access-Control-Allow-Origin': '*', }
2、修改增加bundle的导出,在webpack.config.js增加配置:
父应用配置
然后我们就可以去在main应用中,注册了首先要
npm install qiankun --save然后在main文件index.js中注册子应用:
别忘了我们还需要在public/index.html中写一个div容器,id是我们子应用的那个id,用来承载子应用的渲染:
然后我们就可以开始运行看一看了:
运行成功,随便改一下micro的样式看看效果:
接下来我们需要处理一下路由跳转的问题。
路由的处理实践