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
import { createBridgeComponent } from '@module-federation/bridge-react';
function App() {
return ( <BrowserRouter basename="/">
<Routes>
<Route path="/" Component={()=> <div>Home page</div>}>
<Route path="/detail" Component={()=> <div>Detail page</div>}>
</Routes>
</BrowserRouter>)
}
export default createBridgeComponent({
rootComponent: App
});
set alias to proxy
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: 'http://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
export default defineConfig({
tools: {
rspack: (config, { appendPlugins }) => {
config.output!.uniqueName = 'host';
appendPlugins([
new ModuleFederationPlugin({
name: 'host',
remotes: {
remote1: 'remote1@http://localhost:2001/mf-manifest.json',
},
}),
]);
},
},
});
Use the module
import { createBridgeComponent } from '@module-federation/bridge-react';
const Remote1 = createBridgeComponent(()=> import('remote1/export-app'));
function App() {
return ( <BrowserRouter basename="/">
<ul>
<li>
<Link to="/">
Home
</Link>
</li>
<li>
<Link to="/remote1">
Remote1
</Link>
</li>
</ul>
<Routes>
<Route path="/" Component={()=> <div>Home page</div>}>
<Route path="/remote1" Component={()=> <Remote1 />}>
</Routes>
</BrowserRouter>)
}
const root = ReactDOM.createRoot(document.getElementById('root')!);
root.render(
<App />
);