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

Question

I want to change my routing according to product id, which is dynamic.

I found this solution of variables using a colon.

path: "/:product_id" component: ProductDetail

How can I use product_id in my components.

Answer 1

As explained in the docs , you can access data from the params object on the match prop.

In your case, it would be: match.params.product_id . For example:

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