如何在帶有冒號的ReactJS中使用動態路由

Question

我想根據產品ID（動態）更改路由。

我使用冒號找到了這種變量的解決方案。

path: "/:product_id" component: ProductDetail

如何在組件中使用product_id 。

Answer 1

如docs中所述 ，您可以從match道具上的params對象訪問數據。

在您的情況下，它將是： match.params.product_id 。 例如：

function ProductDetail({ match }) {
  return (
    <div>
      <h3>PID: {match.params.product_id}</h3>
    </div>
  );
}