Guide
Practice
Configuration
Plugins
Showcase
Blog
Ecosystem
Guide
Practice
Configuration
Plugins
Showcase
Blog

React Bridge Overview

@module-federation/bridge-react is a powerful micro-frontend solution designed specifically for React applications. By providing cross-framework rendering and routing coordination capabilities, you can easily export and load React applications or modules as standalone applications.

Core Features

Basic Capabilities

  • 🚀 Application-level Module Export: Use createBridgeComponent to wrap complete React applications as remotely loadable modules
  • 📦 Application-level Module Loading: Seamlessly integrate remote React applications in host applications through createRemoteAppComponent
  • 🎯 Component-level Lazy Loading: Support createLazyComponent for fine-grained component-level lazy loading

Features

  • 🔄 Cross-framework Rendering: Support cross-framework rendering between different frameworks (React, Vue, Angular, etc.)
  • 🛣️ Routing Coordination: Automatically handle React Router basename injection and routing context passing
  • 🔗 Version Compatibility: Full support for React 16-19, automatically handling rendering differences and lifecycle across versions
  • ⚡ Data Prefetch: Built-in resource data prefetch mechanism, supporting application, component, and dependency prefetch optimization

Why This Matters?

  • Progressive Upgrade: Allow different teams to upgrade React versions at their own pace
  • Zero-disruption Integration: New and legacy applications can work together seamlessly without synchronized upgrades
  • Technical Debt Management: Avoid integration issues caused by version inconsistencies
  • Team Autonomy: Each team can independently choose the most suitable React version

Smart Version Adaptation

React Bridge provides flexible import methods, allowing users to choose appropriate implementations based on their React version:

// Use when explicitly specifying version
import { createBridgeComponent } from '@module-federation/bridge-react'; // React 16/17
import { createBridgeComponent } from '@module-federation/bridge-react/18'; // React 18
import { createBridgeComponent } from '@module-federation/bridge-react/19'; // React 19

💡 Examples

Complete Examples - Complete micro-frontend project containing multiple React applications