Javascript React Router Dom v6如何匹配子页面.我上的是v5

据我所知，您基本上有这"/abc/product/:skuType/:skuPage"路由路径，您希望在其上匹配和呈现动态内容.

建议1

呈现单个"/abc/product/:skuType/:skuPage"路由，并使用常规的旧Java switch语句基于skuPage路由路径参数有条件地呈现正确的路由内容.

外部路由

<Routes>
  <Route
    path="/abc/product/:skuType/:skuPage"
    element={
      <PrivateRoute>
        <ProductRoutsStructure />
      </PrivateRoute>
    }
  />
</Routes>

产品布线 struct

import { useParams } from 'react-router-dom';

const ProductRoutsStructure = () => {
  const { skuPage } = useParams();

  switch (skuPage) {
    case Types.CONVERSE:
      return <SneakerPage />;

    case Types.PANTS:
      return <PantsPage />;

    default:
      return <GenericPage />;
  }
};

被路由的内容组件使用useParams挂钩来访问它们的路由参数.

const SneakerPage = () => {
  const { skuPage, skuType } = useParams();

  return (
    <>
      <h1>SneakerPage</h1>
      <div>{skuType} - {skuPage}</div>
    </>
  );
};

const PantsPage = () => {
  const { skuPage, skuType } = useParams();

  return (
    <>
      <h1>PantsPage</h1>
      <div>{skuType} - {skuPage}</div>
    </>
  );
};

演示1

建议2

直接呈现每个特定的skuPage，将skuPage值作为props 向下传递给路由的内容组件.

外部路由

<Routes>
  <Route
    path="/abc/product/:skuType/*" // <-- wildcard matcher for descendent routes
    element={
      <PrivateRoute>
        <ProductRoutsStructure />
      </PrivateRoute>
    }
  />
</Routes>

ProductRoutsStructure

const ProductRoutsStructure = () => (
  <Routes key="productRoutes">
    <Route
      path={Types.CONVERSE}
      element={<SneakerPage skuPage={Types.CONVERSE} />}
    />
    <Route path={Types.PANTS} element={<PantsPage skuPage={Types.PANTS} />} />
    <Route path="*" element={<GenericPage />} />
  </Routes>
);

const SneakerPage = ({ skuPage }) => {
  const { skuType } = useParams();

  return (
    <>
      <h1>SneakerPage</h1>
      <div>
        {skuType} - {skuPage}
      </div>
    </>
  );
};

const PantsPage = ({ skuPage }) => {
  const { skuType } = useParams();

  return (
    <>
      <h1>PantsPage</h1>
      <div>
        {skuType} - {skuPage}
      </div>
    </>
  );
};

演示2