如何在 ReactJS 中使用冒号进行动态路由

Question

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

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

path: "/:product_id" component: ProductDetail

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

Answer 1

正如文档中所解释的params，您可以从 prop上的对象访问数据match。

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

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