反应式路由器-dom v6模块联盟的微前端
我开始使用微前端模块联邦插件。现在，我在构建应用程序之间的路由方面遇到了一些问题。我的主机应用程序有路由3 mfe应用程序。他们每一个都有自己的路由。hostApp中的导航作为内部导航正在工作，但是当我再次单击hostApp/app1时，它仍然呈现出hostApp/app1/somePage1 1。您可以推荐什么样的架构？我如何控制它?现在我使用的是反应性路由器-dom V6，但是我想以这样的方式构建应用程序，明天我可以添加另一个库，比如角路由器或bla-路由器，而不需要对主机进行任何更改。
export default function HostApp() {
return (
<BrowserRouter>
<div>Hello, I'm the host app!</div>
<NavLink to='/app1'> <button> app1 </button> </NavLink>
<NavLink to='/app2'> <button> app1 </button> </NavLink>
<NavLink to='/app3'> <button> app1 </button> </NavLink>
<Routes>
<Route path='/' element={
<Suspense fallback={'Loading'}><div>home page container</div></Suspense>} />
<Route path='app1/*' element={
<Suspense fallback={'Loading'}> <MfeApp1/></Suspense>}/>
<Route path='app2/*' element={
<Suspense fallback={'Loading'}> <MfeApp2/></Suspense>}/>
<Route path='app3/*' element={
<Suspense fallback={'Loading'}> <MfeApp3/></Suspense>}/>
</Routes>
</BrowserRouter>
)}MfeApp：
export default function MfeApp1() {
return (
<BrowserRouter>
<h1>It is a Mfe App1 </h1>
<Routes>
<Route index path='app1' element={<HomePageApp1 />} />
<Route path='app1/somePAge' element={<SomePageOfMfeApp1 />} />
</Routes>
</>
)
}在两个应用程序BrowserRouter中使用都是一个好主意吗？当2个应用程序试图控制浏览器历史时，我在这里看到了一个大问题。但是，如果我在Host中保留一个BrouserRouter，就会得到错误：“useRoutes()只能在组件的上下文中使用”。这对我来说也很有意义，因为内部应用程序也需要一些路由器来控制它。我还尝试在mfe应用程序和控制路径中使用MemoryBrowser和内存历史，比如onNavigete(fromHost)和onParentNavigate(来自mfe)，但我没有使用react路由器-dom V6。因此，任何工作代码或您的建议的例子都会很有帮助。
回答 2
Stack Overflow用户
发布于 2022-07-01 07:58:34
您不需要在从远程微FE导出的组件中使用<BrowserRouter>。您可以看看我在https://github.com/jagadish-k/routing-module-federation的设置，包括后人在这里的相关片段。
在HostApp：app.jsx中
export default function HostApp() {
return (
<BrowserRouter>
<div>Hello, I'm the host app!</div>
<NavLink to='/app1'> <button> app1 </button> </NavLink>
<NavLink to='/app2'> <button> app1 </button> </NavLink>
<NavLink to='/app3'> <button> app1 </button> </NavLink>
<Routes>
<Route path='/' element={
<Suspense fallback={'Loading'}><div>home page container</div></Suspense>} />
<Route path='/app1/*' element={
<Suspense fallback={'Loading'}> <MfeApp1/></Suspense>}/>
</Routes>
</BrowserRouter>
)}在MfeApp中：
app.jsx
export default function MfeApp1() {
return (
<>
<h1>It is a Mfe App1 </h1>
<Routes>
<Route index element={<HomePageApp1 />} />
<Route path='somePAge' element={<SomePageOfMfeApp1 />} />
</Routes>
</>
)
}bootstrap.jsx
import React, { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./app";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(
<StrictMode>
<BrowserRouter basename="/app1">
<App />
</BrowserRouter>
</StrictMode>
);webpack.config.js
...
exposes: {
'./MfeApp': './src/app.jsx',
},
...在这种情况下，当您独立运行MfeApp时，实际上将使用它的bootstrap.jsx来访问BrowserRouter。但是，当MfeApp在HostApp中使用时，Routes被呈现为主机BrowserRouter的子级。
Stack Overflow用户
发布于 2022-11-30 15:34:25
我认为如何处理这一问题的选择不多：
- @jagzviruz建议的是主机和远程处理路由之间的结合。
- https://github.com/module-federation/module-federation-examples/tree/master/react-nested-routers -主机负责更新网址。
- 您可以在这两个应用程序中使用
BrowserHistory，并在远程应用程序中操作path，使其始终带有远程应用前缀(参见示例这里 )。我认为这是最容易理解的解决方案，但可能不是最有效的解决方案。
https://stackoverflow.com/questions/72768822
复制相似问题
腾讯云开发者
