什么是最佳实践，当涉及到对微前端架构和反应路由器最佳实践的反应时

Question

我正在努力构建一个使用ModuleFederation的微前端POC。

我的问题围绕着路由的最佳实践--路由器-dom v6‘。

目前，我的应用程序被分成三个独立的微前端: Shell、容器、报头

在我的例子中，我的Header需要访问url params，以便能够使用react路由器-dom提供的useParams钩子访问read params。

为了使这种情况发生，我必须在react路由器内部提供一条路径，以便能够访问。

报头MFE

<Router>
 <Routes>
    <Route path="/stores/:storeId/:tabId/*" element={<Header />} />
 </Routes>
</Router>

当我使用ModuleFederation导出这个路由器时，我现在省略了包装路由器，只公开了<Header />，这样Container就可以提供路由器等等

这就是我遇到难题的地方..。

从技术上讲，我的Header组件将位于主路由器之外，以便容器能够服务于它的路由和各自的路径

集装箱MFE

<Layout style={{ minHeight: '100vh' }}>
  <Header /> <== does not work / no access to params
  <MainContent>
    <Routes>
       <Route
         path="/stores/:storeId/dashboard"
         element={<h3>dashboard</h3>}
       />
    </Routes>
  </MainContent>
</Layout>

通常，这不会是一个问题，只是Header和dashboard组件在技术上都属于同一条路由，限制了我在主路由中分组的能力，如下所示。

重复路线

<Layout style={{ minHeight: '100vh' }}>
  <MainContent>
    <Routes>
       <Route path="/stores/:storeId/:tabId/*" element={
         <>
           <Header />
           <MainContent>
             <Outlet />
           <MainContent>
         </>
         }>
         <Route
           path="/stores/:storeId/dashboard"
           element={<h3>dashboard</h3>}
         />
      </Route>
    </Routes>
  </MainContent>
</Layout>

path="/stores/:storeId/:tabId/* <=报头导航需要访问这些参数，因此只有在此路由匹配时才会加载。

在本例中:tabId等于仪表板的path="/stores/:storeId/dashboard" <=直接路由

我希望标题始终存在

我尝试过这种方法，它起了作用，但似乎很脏：

<Layout style={{ minHeight: '100vh' }}>
  <Routes>
     <Route path="/stores/:storeId/:tabId/*" element={<Header />} />
  </Routes>
  <MainContent>
    <Routes>
       <Route
         path="/stores/:storeId/dashboard"
         element={<h3>dashboard</h3>}
       />
    </Routes>
  </MainContent>
</Layout>

这是一个不好的做法，还是我看错它的方式，这实际上是可以做的？

我应该导出包装在自己的路径中的<Header />吗？

Answer 1

在深入了解文档之后，似乎有许多声明是可以接受的

反应路由器v6