Reactjs Reactrouter动态路径

怎么说react 路由，如果第一条路径不适合 ":object/:category"，然后想try 一下":some/:thing"作为第二个 试一试？

您不能有两个具有相同路径专用性的路由.换句话说，在路由匹配方面，path=":object/:category"的路由与path=":some/:thing"的路由是相同的；它们将具有相同的路由排名/分数.你需要以某种方式区分这两条路由.

有没有办法以更简洁的方式编写此代码:

<Route
  path="womens/:category"
  element={
    <Suspense fallback={"Loading ..."}>
      <CatalogPage />
    </Suspense>
  }
/>
<Route
  path="mens/:category"
  element={
    <Suspense fallback={"Loading ..."}>
      <CatalogPage />
    </Suspense>
  }
/>
<Route
  path="girls/:category"
  element={
    <Suspense fallback={"Loading ..."}>
      <CatalogPage />
    </Suspense>
  }
/>
<Route
  path="boys/:category"
  element={
    <Suspense fallback={"Loading ..."}>
      <CatalogPage />
    </Suspense>
  }
/>

您可以通过映射路由使这部分路由代码更接近100.

示例:

import {
  ...,
  generatePath
} from 'react-router-dom';

...

return (
  ...
  {["womens", "mens", "girls", "boys"].map(type => (
    <Route
      key={type}
      path={generatePath(":type/:category", { type })}
      element={
        <Suspense fallback={"Loading ..."}>
          <CatalogPage />
        </Suspense>
      }
    />
  ))}
  ...