英文:
React Routes not working with Module Federation
问题
这里是根应用程序的路由。
这里是位于.packages/payments/scr/app目录中的Payments应用程序的路由。
问题是，“Payments”页面已呈现并正常工作，但“Payments”内部的所有路由都不起作用（这是我得到的情况，没有错误）。
我猜测“Payments”内部的路由只是未初始化，我不明白为什么（根据React v18文档制作的所有“bootstrap.jsx”文件都是正确的）。
在“Payments”应用程序中添加BrowserRouter会导致错误
无法在另一个
<Router>内部呈现<Router>
也许我没有注意到某些细节，如果您需要任何其他设置详细信息，请告诉我。
英文:
So I'm using React v18, Router v6 and Module federation
this is Payments app routes in .packages/payments/scr/app
the problem is that Payments page is rendered and working fine, but all routes inside Payments not working at all this is what i get, no errors
My guess is that routes inside Payments are just not initialized and I don't understand why.All bootstrap.jsx files are made accordingly by React v18 docs
Adding BrowserRouter inside Payments app is causing error
> You cannot render <Router> inside another <Router>
Maybe I don't see something, let me know if you need any additional setup details.
答案1
得分: 1
主要的App代码在为后代路由添加通配符"*"匹配器时是正确的。
<Route
path="/payments-kz/*"
element={<PaymentsKzPage store={store} />}
/>
问题出在PaymentsKzPage渲染后代路由上。嵌套的Routes组件会根据父路由构建其路由，例如"/payments-kz"。后代路由错误地在路径前添加了"payments-kz"路径段。
示例：
<Route
path="/payments-kz/catalog/:categoryId/providers/:subcategoryId"
element={<Providers />}
/>
实际路径解析为：
"/payments-kz/payments-kz/catalog/:categoryId/providers/:subcategoryId"
为解决这个问题，您应该从后代路由中删除"/payments-kz"路径段。
<Routes>
<Route
path="/catalog/:categoryId/providers/:subcategoryId"
element={<Providers />}
/>
<Route path="/catalog/:id/:category" element={<Subcategories />} />
<Route path="/catalog/:id" element={<Subcategories />} />
<Route path="/providers/:subcategoryId" element={<Providers />} />
....等等....
</Routes>
英文:
The main App code is correct when it appends a wildcard "*" matcher to the routes for the descendent routes to be matched.
<Route
path="/payments-kz/*"
element={<PaymentsKzPage store={store} />}
/>
The issue is in the PaymentsKzPage rendering the descendent routes. The nested Routes component builds its routes relative to the parent route, e.g. "/payments-kz". The descendent routes are incorrectly prepending a "payments-kz" path segment.
Example:
<Route
path="/payments-kz/catalog/:categoryId/providers/:subcategoryId"
element={<Providers />}
/>
The path actually resolves to:
"/payments-kz/payments-kz/catalog/:categoryId/providers/:subcategoryId"
To resolve the issue you should remove the "/payments-kz" segment from the descendent routes.
<Routes>
<Route
path="/catalog/:categoryId/providers/:subcategoryId"
element={<Providers />}
/>
<Route path="/catalog/:id/:category" element={<Subcategories />} />
<Route path="/catalog/:id" element={<Subcategories />} />
<Route path="/providers/:subcategoryId" element={<Providers />} />
.... etc ...
</Routes>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论