React bridge is used to load the routing module in mf, so that the routing module can work properly with the host environment.
npm install @module-federation/bridge-reactReact 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
``bash`
pnpm add @module-federation/bridge-react
> Use createBridgeComponent create component provider
`jsx
// ./src/index.tsx
import { createBridgeComponent } from '@module-federation/bridge-react';
function App() {
return (
Home page}>
Detail page}>
}
export default createBridgeComponent({
rootComponent: App
});
`
> set alias to proxy
`js`
//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: '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',
}
}),
]);
},
},
});
`js`
//rsbuild.config.ts
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
`jsx
// ./src/index.tsx
import { createBridgeComponent } from '@module-federation/bridge-react';
const Remote1 = createBridgeComponent(()=> import('remote1/export-app'));
function App() {
return (
Home
Remote1
Home page}>
}
const root = ReactDOM.createRoot(document.getElementById('root')!);
root.render(
);
``