由 Module Federation 和 React-router-dom v6 实现的微前端

Question

我开始使用带有 Module Federation Plugin 的微前端。现在我在应用程序之间构建路由时面临一些问题。我的主机应用程序有路线 3 mfe 应用程序。他们每个人的内部都有自己的路由。Host-app 中的导航正常工作，就像内部导航一样，但是当我在 hostApp/app1/somePage1 上再次单击导航到 hostApp/app1 时，它仍然呈现 hostApp/app1/somePage1。您可以推荐什么架构？我如何控制它？现在我使用react-router-dom V6，但我想构建应用程序，以便明天我可以添加另一个库，例如 Angular-router 或 bla-bla-bla-Router，而无需对主机进行任何更改

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

Mfe应用程序：

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 是一个好主意吗？当两个应用程序尝试控制浏览器历史记录时，我在这里看到一个大问题。但是，如果我在主机应用程序中只留下一个 BrouserRouter，我会收到错误：“useRoutes() 只能在组件的上下文中使用”。这对我来说也很有意义，因为内部应用程序也需要一些路由器来控制它。我还尝试在 mfe 应用程序中使用 MemoryBrowser 和内存历史记录，并通过 onNavigete(fromHost) 和 onParentNavigate(from mfe) 等回调控制路径，但我未能使用react-router-dom V6 做到这一点。因此，任何工作代码的示例或您的建议都会非常有帮助

Answer 1

您不需要<BrowserRouter>在从远程 Micro FE 导出的组件中使用 a。您可以查看我在https://github.com/jagadish-k/routing-module-federation上的设置 ，包括此处的相关片段以供后代使用。

在主机应用程序中： 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。