0

我正在使用Single-SPA并React创建一个微前端架构。

目前，我有 3 个反应应用程序：

  1. 导航栏应用程序：始终加载。这有 2 个菜单可以一次加载下面的一个 React 应用程序。

  2. React App R1：这为路由'/ r1'加载

  3. React App R2：这为路由'/r2'加载

根据single-spa文档，当我们注册一个 React 应用程序时，根据activeWhen我们传递给的字段registerApplication，single-spa 将决定它是否必须挂载该应用程序。

示例代码：

import { registerApplication, start } from "single-spa";

 registerApplication( 
  name: "R1",
  app: () =>System.import("R1"),
  activeWhen: ['/r1'],
  customProps: { domElement: document.getElementById('page-1-container') }
);

设想：

  1. React 应用程序 R1 安装在路由 '/r1' 下
  2. React 应用程序 R2 安装在路由 '/r2' 下
  3. 我们在路线 r1 中，因此安装了应用程序 R1。在这里，我们在按钮单击时调度一个自定义事件。
  4. 然后我们移动到路由 /r2，因此 App R1 被卸载，App R2 被安装。我在 App R2 中注册了一个事件监听器来监听来自 App R1 的事件。

问题： 来自 R1 的事件在单击按钮时被抛出，但由于没有安装 R2（直到我们移动到路由 /r2），所以没有监听器来监听来自 R1 的事件。

有没有办法做到这一点？

有人可以在这里帮忙吗。任何帮助深表感谢。

4

0 回答 0