javascript React-Router-Dom v6如何匹配子页面我在V5

uujelgoq 于 2023-10-14 发布在 Java

关注(0)|答案(1)|浏览(102)

我发现我不得不重新组织我的路由，从React-Router-Dom v5切换到v6。
我有这条外部路线：

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

但我的路线都不对。所以我不确定如何匹配。例如，在一个路由中，它看起来像这样：'abc/product/1234/converse'
我正在做的是：

export const ProductRoutesStructure = () => (
  <Routes key="productRoutes">
    <Route
      path={`/abc/product/:skuType/:skuPage(${Types.CONVERSE})`} 
      element={<SneakerPage />}
    />
    <Route
      path={`/abc/product/:skuType/:skuPage(${Types.PANTS})`} 
      element={<PantsPage />}
    />
    <Route path="*" element={<GenericPage />} />
  </Routes>
)

问题是，skuType和skuPage必须是动态的，就像在那些element组件中一样，因为我碰到了某些API。我只是真的需要在skuPage上匹配。
我想我错过了一些细微差别的子页面。我试着只匹配“Types.匡威”，但这是一个不去，它总是默认为最后一位"*" catch-all路由。
这是我所期望的，这在v5中肯定有效，因为这是我使用的实际代码（路径不同/名称）。但完全一样。工作起来像一个魅力，但V6，没有。
因此，如果用户访问"www.myDomain/abc/product/male/converse"，
我希望这条路线能匹配：

<Route
  path={`/abc/product/:skuType/:skuPage(${Types.CONVERSE})`} 
 element={<SneakerPage />}
/>

如果用户访问"www.myDomain/abc/product/female/pants"
它将匹配：

<Route
  path={`/abc/product/:skuType/:skuPage(${Types.PANTS})`}
  element={<PantsPage />}
/>

但让我们只是让它工作。我在ProductRoutesStructure中更改路由没有问题，但我尝试了一堆组合，没有匹配的。
请注意，我确实需要skuType和skuPage对子组件/页面可用，这就是为什么我需要它在基本路由中。

JavaScript

来源：https://stackoverflow.com/questions/77277178/react-router-dom-v6-how-do-i-match-subpages-i-was-on-v5

1条答案

按热度按时间

4xrmg8kj1#

据我所知，你基本上有这个"/abc/product/:skuType/:skuPage"路由路径，你想匹配和呈现动态内容。

建议一

呈现单个"/abc/product/:skuType/:skuPage"路由，并使用常规的旧JavaScript switch语句根据skuPage路由路径参数有条件地呈现正确的路由内容。
外部路线

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

产品展示路线结构

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

const ProductRoutesStructure = () => {
  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>
    </>
  );
};

Demo 1

建议二

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

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

产品路线结构

const ProductRoutesStructure = () => (
  <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>
    </>
  );
};

Demo 2

赞(0）回复(0）举报 2023-10-14

我来回答

javascript React-Router-Dom v6如何匹配子页面我在V5

1条答案

建议一

Demo 1

建议二

Demo 2

相关问题

热门标签

最新问答