native路由模式下, 页面首次加载子应用, 由于缺少初始__MICRO_APP_STATE__状态, 导致路由返回初始页失败.

[rohow]

问题描述

HI, 我目前的使用场景是:

1. 主应用与子应用都是react 18 + react-router v6
2. 路由模式使用native模式
3. 主应用通过/sub-app作为baseRoute来加载子应用

目前问题现象是

在页面首次加载时(子应用也在第一屏加载), window.history.state中缺少__MICRO_APP_STATE__属性, 导致页面在push进入子页面后无法返回初始页面. 点击浏览器back后url地址更新, 但是页面不会重新渲染, 也不会触发任何路由事件.

初步排查了下, 应该与下面这行有关

micro-app/src/sandbox/router/location.ts

Line 377 in d47efee

(targetFullPath !== rawLocation.pathname + rawLocation.search + rawLocation.hash) &&

在native模式下, 路由首次加载, 由于url与rawLocation完全相等. 导致初始__MICRO_APP_STATE__没有写入history.state中, 进而造成返回初始页失败.

目前hack解决方案

在页面初始加载后, 手动replace一次 让state写入, 就可以正常返回了. 不确定这个地方是不是为了解决其他框架问题才特意加上的吗?

环境信息

• micro-app版本：1.0.0-rc.15
• 主应用前端框架&版本：react18.2.0
• 子应用前端框架&版本：react18.2.0
• 构建工具&版本：webpack5