javascript - 如何在带有冒号的 ReactJS 中使用动态路由

Question

我想根据动态的产品 ID 更改路由。

我使用冒号找到了这个变量的解决方案。

path: "/:product_id" component: ProductDetail

如何在我的组件中使用 product_id。

Answer 1

作为explained in the docs ，您可以从 match 上的 params 对象访问数据 Prop 。

在您的情况下，它将是:match.params.product_id。例如:

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