javascript React Routes不适用于模块联合

q3qa4bjr  于 2023-03-16  发布在  Java
关注(0)|答案(1)|浏览(154)

我使用的是React v18、Router v6和模块联合
this is root app routes
this is Payments app routes in .packages/payments/scr/app
问题是Payments页面被呈现并且工作正常,但是Payments内的所有路由在this is what i get, no errors处根本不工作
我猜Payments内部的路由没有初始化,我不明白为什么。All bootstrap.jsx files are made accordingly by React v18 docs
Payments应用程序内添加BrowserRouter导致错误
不能在另一个<Router>内渲染<Router>
也许我没有看到什么,让我知道,如果你需要任何其他设置细节。

7rfyedvj

7rfyedvj1#

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 />} />
  .... etc ...
</Routes>

相关问题