React Bridge

React bridge is used to load the routing module in mf, so that the routing module can work properly with the host environment.

> When to use

• Load the route module
• Load across the front end framework

How to use

1. Install the react bridge library

pnpm add @module-federation/bridge-react

2. Configure the react bridge library

> Use createBridgeComponent create component provider

// ./src/index.tsx
import { createBridgeComponent } from '@module-federation/bridge-react';

function App() {
  return ( 
    
       <div>Home page</div>}&gt;
       <div>Detail page</div>}&gt;
    
  )
}

export default createBridgeComponent({
  rootComponent: App
});

> set alias to proxy

//rsbuild.config.ts
export default defineConfig({
  source: {
    alias: {
      'react-router-dom$': path.resolve(
        __dirname,
        'node_modules/@module-federation/bridge-react/dist/router.es.js',
      ),
    },
  },
  server: {
    port: 2001,
    host: 'localhost',
  },
  dev: {
    assetPrefix: 'https://localhost:2001',
  },
  tools: {
    rspack: (config, { appendPlugins }) => {
      delete config.optimization?.splitChunks;
      config.output!.uniqueName = 'remote1';
      appendPlugins([
        new ModuleFederationPlugin({
          name: 'remote1',
          exposes: {
            './export-app': './src/index.tsx',
          }
        }),
      ]);
    },
  },
});

3. Load the module with routing

//rsbuild.config.ts
export default defineConfig({
  tools: {
    rspack: (config, { appendPlugins }) => {
      config.output!.uniqueName = 'host';
      appendPlugins([
        new ModuleFederationPlugin({
          name: 'host',
          remotes: {
            remote1: 'remote1@https://localhost:2001/mf-manifest.json',
          },
        }),
      ]);
    },
  },
});

> Use the module

// ./src/index.tsx
import { createBridgeComponent } from '@module-federation/bridge-react';

const Remote1 = createBridgeComponent(()=> import('remote1/export-app'));

function App() {
  return ( 
    <ul>
      <li>
        
          Home
        
      </li>
      <li>
        
          Remote1
        
      </li>
    </ul>
    
       <div>Home page</div>}&gt;
       }&gt;
    
  )
}

const root = ReactDOM.createRoot(document.getElementById('root')!);
root.render(
    
);