Webpack模块联合与反应路由器-dom
如何正确设置ModuleFederation和react-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.
回答 1
Stack Overflow用户
发布于 2022-01-10 12:35:10
在远程应用程序中，您应该将头组件封装在BrowserRouter中，但是不应该公开包含BrowserRouter的组件。在本例中，我使用的是react路由器-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;然后，在您的主机应用程序中，您可以像在远程应用程序中一样使用标头组件。
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不会被模块联合公开。
https://stackoverflow.com/questions/70639472
复制相似问题
腾讯云开发者
