如何集成两个独立部署的React应用且不跳转地址栏URL

1. 微前端（同React技术栈最优方案） #

• 核心实现：可使用Module Federation（Webpack5 原生支持）、qiankun、single-spa等微前端方案，将应用B注册为应用A的子应用，在A的指定标签页位置挂载B的完整应用实例，全程地址栏保持应用A的localhost:9000不变。
• 适配要求：仅需对两个应用的入口配置、构建配置做少量改造，在应用B的服务端配置跨域头允许A的域名访问其静态资源，无需修改后端业务逻辑。
• 优势：完全规避iframe的滚动隔离、弹窗无法全屏、性能损耗等问题，还可以灵活实现两个应用之间的状态传递、方法调用。

2. 反向代理聚合 #

• 核心实现：在应用A的入口网关（如Nginx）新增路由匹配规则，将特定前缀的请求（例如/app-b/**）反向代理到应用B的localhost:9003服务，参考配置如下：

  location /app-b/ {
    proxy_pass http://localhost:9003/;
    proxy_set_header Host $host;
  }
  

  改造完成后在应用A的对应标签页中直接渲染/app-b路径下的内容即可。
• 适配要求：修改应用B的打包配置，给静态资源、前端路由添加/app-b公共前缀，避免资源加载404。
• 优势：改造量极小，不需要改动前端业务代码，渲染性能和原生应用完全一致。

3. 应用B抽离为独立组件库 #

• 核心实现：把应用B需要嵌入的UI模块单独抽离，打包为可复用的React组件npm包，发布到内部私有npm仓库后，应用A直接安装引入该组件，在对应标签页渲染即可。
• 适配要求：需要抽离B的对应UI逻辑，处理好组件依赖、样式隔离，后续B的UI迭代需要同步更新npm包版本。
• 优势：完全原生的交互体验，不存在跨域、上下文隔离相关的问题，适合仅需要嵌入B的部分UI的场景。

4. 服务端模板拼接 #

• 核心实现：如果应用A是服务端渲染的架构，可在Scala后端渲染对应标签页的HTML时，直接插入应用B的静态资源链接和挂载DOM节点，应用A的前端加载完成后会自动挂载B的应用实例。
• 适配要求：应用B的静态资源需要配置跨域头允许A的域名访问，同时做好两个应用的全局样式、全局变量隔离。
• 优势：不需要引入额外框架，整体改造量低。

• 后续两个应用有较多互相嵌入需求：优先选微前端方案
• 临时嵌入需求，希望改造成本最低：优先选反向代理方案
• 仅需嵌入应用B的少量UI模块：优先选组件库抽离方案

内容的提问来源于stack exchange，提问作者Dharmesh Mehta