Webpack模块联邦和react-router-dom

Question

如何正确设置ModuleFederation和react-router-dom，以便我可以拥有：

• Router和在Host应用程序中定义的路由
• 远程的Header应用程序具有指向Host中已定义的路由的<Link>组件？

但是，以下设置会失败，并出现以下错误：

index.js:15 Uncaught Error: useHref() may be used only in the context of a <Router> component.

设置如下：

Host MFE应用程序，localhost:3001

...
import { BrowserRouter } from 'react-router-dom'

const Header = lazy(() => import("header/Header"))

const Host = () => {
  return (
    <BrowserRouter>
       <React.Suspense fallback="Loading Header...">
         <Header />
       </React.Suspense>
       <Switch>
         <Route path="/input">
           <InputFormView />
         </Route>
         <Route path="/">
            <ListView />
         </Route>
       </Switch>       
    </BrowserRouter>)
}

...

主机的webpack配置文件

...

plugins: [
  new ModuleFederationPlugin({
      name: 'host',
      remotes: {        
        header: 'header@http://localhost:3002/remoteEntry.js'
      },
      exposes: {
      },
      shared: {
        ...deps,
        react: {
          singleton: true,
          requiredVersion: deps.react,
        },
        "react-dom": {
          singleton: true,
          requiredVersion: deps["react-dom"],
        },       
        "react-router-dom": {
          singleton: true,
          requiredVersion: deps["react-router-dom"],
        }
      },
    }),
...

头部 MFE 应用程序，本地主机：3002

...

import { Link } from 'react-router-dom'

const Header = () => {
 return (
   <div id="header">
     <h1> Header </h1>
     <Link to="/input"> 
        <button type="button"> Input form </button>        
     </Link>
   </div> 
 )

...

Header 的 webpack.config.js

...

 new ModuleFederationPlugin({
      name: 'header',
      filename: 'remoteEntry.js',
      exposes: {
        './Header': './src/Components/Header'
      },
      remotes: {},      
      shared: {
        ...deps,
        react: {
          singleton: true,
          requiredVersion: deps.react,
        },
        "react-dom": {
          singleton: true,
          requiredVersion: deps["react-dom"],
        },      
        "react-router-dom": {
          singleton: true,
          requiredVersion: deps["react-router-dom"],
        }
      },
    }),
...

但是，如果我把Header也包装在BrowserRouter中，那么我会遇到以下错误：

index.js:15 Uncaught Error: You cannot render a <Router> inside another <Router>. You should never have more than one in your app.

- anmatika

---

你的问题解决了吗？ - Arjun Mudhaliyar

Answer 1

在你的远程应用程序中，你应该在BrowserRouter中包装你的头部组件，但是包含BrowserRouter的组件不应该被暴露出来。在这个例子中，我使用的是react-router-dom v6。

使用另一个组件（在我的例子中是Test.js，在index.js中使用，但是这不会被模块联邦公开，它只用于远程应用程序的本地开发）。Header是你想要公开到模块联邦中并在其他应用程序中使用的组件（因为你已经在webpack配置中有它了）。

import React from 'react';
import {
    BrowserRouter,
    Routes,
    Route,
  } from "react-router-dom";
import Header from './Header';

const localRouter = () => {
  return (
    <BrowserRouter>
        <Routes>
            <Route path="/" element={<div>home<Header></Header></div>}></Route>
            <Route path="input"element={<div>input</div>}/>
        </Routes>
    </BrowserRouter>)
}

export default localRouter;

然后在您的主机应用程序中，您可以像在远程应用程序中一样使用Header组件。

import React from 'react';
import {
  BrowserRouter,
  Routes,
  Route,
  Link
} from "react-router-dom";

const Header = React.lazy(() => import('header/Header'));

const HostApp = () => (
  <>
    <div>Hello, I'm the host app!</div>
    <BrowserRouter>
    <Routes>
        <Route path="/" element={<div>home
                    <React.Suspense fallback="loading...">
                        <Header />
                    </React.Suspense>
              </div>}></Route>
        <Route path="input"element={<div>input</div>}/>

... some other routes

    </Routes>
  </BrowserRouter>
  </>
);

export default HostApp;

这个想法是远程应用程序需要在BrowserRouter中运行以进行本地开发，但在主机应用程序中使用时，Header组件将使用来自主机应用程序的BrowserRouter，因为模块联合没有公开远程应用程序的BrowserRouter。

- OanaB