使用single-spa搭建带React基座的结构化微前端方案咨询

single-spa完全适配你的需求，你不需要硬套官方layout引擎，该引擎仅适用于根配置为纯静态、无复杂UI交互的场景，你需要的React基座带交互型公共布局、路由驱动子应用加载的场景，是single-spa最成熟的落地场景之一。

• 改造MF1 React项目为single-spa根应用：直接在现有React项目中安装single-spa依赖即可，不需要使用官方create-single-spa生成的根配置模板，所有基座的UI交互逻辑完全按普通React项目开发即可。
• 预留子应用挂载节点：正常开发header、footer、sidebar公共组件，在主内容区域预留唯一标识的DOM节点作为子应用的挂载容器，示例代码如下：

// 基座Layout组件示例
function AppLayout() {
  return (
    <div className="layout">
      <Header />
      <div className="main">
        <Sidebar />
        {/* 子应用挂载节点 */}
        <div id="micro-app-container" className="content" />
      </div>
      <Footer />
    </div>
  )
}

• 注册子应用：在基座入口文件中调用registerApplication方法注册所有子应用，子应用的激活规则和侧边栏菜单的路由路径一一对应，指定挂载容器为预留的节点：

// 基座入口文件index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import AppLayout from './AppLayout';
import { registerApplication, start } from 'single-spa';

// 先渲染基座公共布局
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<AppLayout />);

// 注册子应用
registerApplication({
  name: 'sub-app-demo1',
  // 子应用入口，可配置为远程加载地址
  app: () => import('sub-app-demo1/src/main'),
  // 路由匹配规则，匹配时自动加载该子应用
  activeWhen: '/demo1',
  customProps: {
    container: '#micro-app-container'
  }
});

// 其他子应用按相同规则注册即可

// 启动single-spa
start();

• 子应用适配：所有子应用按single-spa规范暴露bootstrap、mount、unmount生命周期，挂载时渲染到传入的container节点，卸载时清空对应节点即可，React子应用可直接使用single-spa-react适配器简化适配逻辑。
• 菜单联动：侧边栏菜单点击时直接跳转对应子应用的激活路由即可，single-spa会自动监听路由变化，完成旧子应用卸载、新子应用加载的逻辑，无需手动控制。

• 基座和子应用的公共依赖建议做externals外置，避免多实例加载冲突，同时减少打包体积
• 跨应用通信可通过注册子应用时传入全局状态实例，或使用事件总线方案实现
• 子应用的路由基准路径需要和注册时的activeWhen前缀匹配，避免路由跳转异常

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