Webpack 模块联合和 React-router-dom

Question

如何正确设置 ModuleFederationreact-router-dom以便我可以

• Router和定义的路线Host应用程序中定义的路线
• 并且远程Header应用程序具有<Link>指向主机中定义的路由的组件？

但是，下面的设置失败，出现以下错误：

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

设置：

托管 mfe 应用程序，本地主机：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.config.js

...

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> 
 )

...

标头的 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.

Answer 1

在远程应用程序中，您应该将标头组件包装在 BrowserRouter 内，但包含 BrowserRouter 的组件不应公开。在示例中，我使用的是react-router-dom v6。

使用另一个组件（在我的示例中是 Test.js，它将在 index.js 中使用，但这不会由模块联合公开，并且仅用于远程应用程序的本地开发）。标头是您想要向模块联合公开并在其他应用程序中使用的组件（因为您的 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;

然后，在主机应用程序中，您可以按照与远程应用程序中类似的方式使用标头组件。

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 内运行以进行本地开发，但是当在主机应用程序中使用时，标头组件将使用主机应用程序中的 BrowserRouter，因为远程应用程序中的 BrowserRouter 不会在任何地方暴露给主机应用程序。模块联盟。