问题一
主应用和子应用的redux，都加上redux-persist后，redux-store冲突，子应用的redux-store覆盖了主应用。
解决思路
- 取消子应用的
chrome redux dev tools注册，尝试修改后未解决 - 修改每个项目的
rudux-persist的标识为唯一标识，尝试修改后未解决 - 猜想是
redux-persist本身硬加载机制问题，后续在研究一下。 - 主应用解耦业务逻辑，放弃
redux-persist，甚至放弃redux的使用，仅处理框架逻辑。 不太现实，但估计是可以redux冲突问题 - 子应用采用原生
redux，所有状态持久化需求放在主应用做，然后通过全局状态下发到子应用。不太现实，对业务系统改造较大
问题二
单个子应用需要导出多个路由，集成在一个主应用页面中，子应用组件显示第一个，其他的不显示。
解决思路
- 子路由的
hash路由冲突，为了避免子项目的路由冲突，子项目组件不通过路由判断，而是通过主应用的props下发的参数来判断，在route里加入判断:
<Route path="/some/path" render={ () => {
if(props.route === "xxx"){
return <ComponentA />
} else {
return <ComponentB />
}
}}
/>
尝试修改后未解决
-
主应用是否开启了单例模式
设置qiankun的配置：singular：ture => false尝试修改后未解决 -
子项目最终导出的组件，是挂载在子页面中某个
DOM节点的，可能是"#app"，当qiankun在挂载第二个路由的时候，抽离出来的子项目的DOM会覆盖第一个路由中匹配到的节点，所以最终只显示最后一个路由匹配到的节点。
子项目的入口文件里加入判断，当前节点从父级节点里做区别，拿取唯一节点:
function render(props = {}) {
let DOM;
if (window.__POWERED_BY_QIANKUN__) {
//qiankun集成模式
const query = `${props?.parentCantainer ?? ""} .app`;
DOM = document.querySelector(query);
} else {
//单例模式
DOM = document.querySelector(".app");
}
ReactDOM.render(<App {...props} />, DOM);
}
尝试修改后可解决此情况
问题三
生产环境下，主应用加载子系统，报错CORS error。
分析原因
- 后台
nginx配置拦截或者做了错误转发。nginx本身已经做了api的跨域支持，但是qiankun的子业务系统拉取资源，走的是fatch.post，请求到了ng后，ng发现是post请求，就把请求转发到接口服务，但是接口服务没有对应的methods，直接就跳过，所以ng最终给了前端异常的返回。
解决思路
- nginx本身已经做了
api的跨域支持，还需要针对不同的请求做调整，可以参考这篇文章。 调整试验中
问题四
生产环境的弱网环境下，在fetch首屏子应用的时候，基座出现白屏等待loading。
分析原因
quankun预加载也需要时间，在首屏的是时候可能出现白屏
解决思路
-
qiankun的start函数的应该增加个回调函数，用来处理fetch预加载的需求。（已提交 issues） - 在跳转后的页面增加
loading动效，利用MutationObserver对象监听跳转后子应用加载完毕后，撤除loading。
网友评论