micro-app icon indicating copy to clipboard operation
micro-app copied to clipboard

微应用使用路由拦截组件Prompt后 在基座切换至其它微应用后再切回微应用,会弹出window.confirm的弹框

Open huchaolin opened this issue 2 years ago • 2 comments

问题描述

问题的具体描述 使用React 路由拦截组件Prompt进行路由拦截时, 当微应用micro-app设置了缓存keep-alive, 切出该微应用再切回的时候会弹出window.confirm; 当我将该微应用的micro-app的keep-alive设为false不会出现这个问题; 当我从微应用切出至别的微应用时, 也不会出现路由拦截, 但切回时却触发了(感觉是切出去的时候已经触发只是存在缓存里然后切回的时候就显示出来了?)

  1. 就是请问下是否有什么可以保留keep-alive 功能 的情况下把这个缓存中的window的弹出框去掉的办法吗?
  2. 也想请问一下 MicroApp是否有什么针对这种业务场景的解决方案吗: 微应用有路由拦截功能 且当 基座切换至别的微应用时也需要路由拦截

复现步骤

1.基座应用 嵌入两个微应用, 分别为微应用A(React 搭建)、微应用B, 均开启keep-alive; 3.微应用A 内部 使用 react-router-dom 提供的路由拦截组件<Prompt when={true} message="有尚未保存的信息,确认离开?" /> 4. 在基站应用中 切换至微应用A , 再切换至微应用B , 再切回至微应用A 时, window.confirm被调用了(或者说缓存微应用A中的window.confirm出现了),且此时基座路由仍处于微应用B(包括浏览器url也是微应用B), 点击confirm对话框中的确认或取消按钮均能切换至微应用A

环境信息

  • micro-app版本:"@micro-zoe/micro-app": "0.8.8"
  • 主应用前端框架&版本:"react": "^16.12.0", "react-dom": "^16.12.0", "react-router-dom": "^5.3.3"
  • 子应用前端框架&版本:"react": "^17.0.1", "react-dom": "^17.0.1", "react-router-dom": "^5.2.3",
  • 构建工具&版本:"webpack": "^5.64.0",

huchaolin avatar Aug 05 '22 04:08 huchaolin

这种情况最好是将组件Prompt作放到基座中,拦截的逻辑放在基座中

bailicangdu avatar Aug 05 '22 07:08 bailicangdu

这种情况最好是将组件Prompt作放到基座中,拦截的逻辑放在基座中

感谢回复。 但是拦截的逻辑放到基座中, 如何拦截到微应用内部的路由变化呢? 目前我是将拦截的逻辑在基座和微应用都加了 , 微应用内自己拦截自己的, 基座拦截切换微应用时的路由, 但是切回至微应用时,就会有缓存中的window.confirm弹出来, 但是去掉keep-alive就不会有 就是交互上体验会差很多;

另外我想到一个办法, 就是在基座去拿到微应用的window 并在onAfterhidden重写它的window.confirm=function() { return false },onBeforeshow的时候去恢复它原来的window.confirm,所以问一下有什么办法能在基座拿到微应用自己的window对象吗?

huchaolin avatar Aug 05 '22 07:08 huchaolin