如何在React父应用中无iframe集成带Hash Router的React子应用

问题背景 #

• 现有两个React应用：父应用 + 采用Hash Router的子应用
• 子应用已通过npm run build打包，产物放置在父应用的public目录下
• 当前通过iframe加载子应用指定路由内容，希望替换为无iframe方案
• 核心需求：在父应用中复用子应用的菜单及页面内容，不依赖iframe跳转

可行解决方案 #

1. 子应用组件封装为npm包（推荐，适合组件复用场景） #

将子应用中需要复用的组件（如菜单、MarginCalculator页面）抽离为独立的npm包（支持私有包），父应用直接安装并导入使用：

• 步骤：
  1. 子应用中拆分出可复用的组件，配置package.json发布到npm仓库或私有源
  2. 父应用执行npm install your-subapp-package安装包
  3. 父应用中直接导入组件并渲染
• 示例代码：

// 父应用Testing组件
import { MarginCalculator, SubAppMenu } from 'your-subapp-package';

const Testing = () => {
  return (
    <div className="testing" style={{ width: "100%", height: "100%" }}>
      <SubAppMenu />
      <MarginCalculator />
    </div>
  );
};

export default Testing;

• 注意：若子应用依赖Hash Router，可在父应用统一管理路由，或让子组件内部通过useHashRouter处理路由逻辑

2. Webpack Module Federation（微前端方案，适合独立部署场景） #

通过Webpack的Module Federation插件实现跨应用模块共享，无需重构子应用为npm包，支持子应用独立部署：

• 子应用webpack配置（简化版）：

// 子应用webpack.config.js
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'subapp',
      filename: 'remoteEntry.js',
      // 暴露需要共享的组件/模块
      exposes: {
        './MarginCalculator': './src/pages/MarginCalculator',
        './SubMenu': './src/components/SubMenu',
      },
      // 共享React依赖，避免重复打包
      shared: { react: { singleton: true }, 'react-dom': { singleton: true } },
    }),
  ],
};

• 父应用中加载远程组件：

// 父应用Testing组件
import React, { lazy, Suspense } from 'react';

// 动态导入子应用暴露的组件
const MarginCalculator = lazy(() => import('subapp/MarginCalculator'));
const SubMenu = lazy(() => import('subapp/SubMenu'));

const Testing = () => {
  return (
    <div className="testing" style={{ width: "100%", height: "100%" }}>
      <Suspense fallback={<div>加载中...</div>}>
        <SubMenu />
        <MarginCalculator />
      </Suspense>
    </div>
  );
};

export default Testing;

3. Single SPA（微前端方案，适合多应用复杂集成） #

将父应用作为root config，子应用注册为Single SPA应用，通过路由匹配挂载子应用内容，适合多应用共存的复杂场景。

4. 直接复制代码（临时方案，不推荐） #

将子应用需要的组件/页面代码直接复制到父应用中，缺点是代码冗余，子应用更新后需同步复制，维护成本极高。

关于React官方文档的说明 #

你提到的那篇文档针对的是在非React项目中添加React的场景，和你当前两个React应用集成的需求不匹配，对你的问题帮助不大。

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