#React Bridge 概览

@module-federation/bridge-react 是一个强大的微前端解决方案，专为 React 应用设计。通过提供跨框架渲染和路由协同能力，您可以轻松地将 React 应用或模块作为独立应用进行导出和加载。

#核心功能

#基础能力

• 🚀 应用级模块导出：使用 createBridgeComponent 将完整的 React 应用包装为可远程加载的模块
• 📦 应用级模块加载：通过 createRemoteAppComponent 在宿主应用中无缝集成远程 React 应用
• 🎯 组件级懒加载：支持 createLazyComponent 实现细粒度的组件级懒加载

#特性

• � 跨框架渲染：支持不同框架（如 React、Vue、Angular 等）间的跨框架渲染
• 🛣️ 路由协同能力：自动处理 React Router 的 basename 注入和路由上下文传递
• 🔗 版本兼容：完全支持 React 16-19，自动处理不同版本间的渲染差异和生命周期
• ⚡ 数据预取：内置资源数据预取机制，支持应用、组件和依赖的预取优化

#为什么这很重要？

• 渐进式升级：允许不同团队按自己的节奏升级 React 版本
• 零中断集成：新老版本应用可以无缝协作，无需同步升级
• 技术债务管理：避免因版本不一致导致的集成问题
• 团队自主性：每个团队可以独立选择最适合的 React 版本

#关键 API 概览

#生产者端 API

createBridgeComponent：将 React 应用包装为 Bridge 组件（应用组件），供消费者远程加载。需根据生产者项目使用的 React 版本选择对应的导入路径：

shared: {
  'react-dom/': {
    singleton: true,
  },
}

#消费者端 API

#💡 示例

完整示例 - 包含多个 React 应用的完整微前端项目