qiankun踩坑记录

问题一

主应用和子应用的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。