How to use dynamic routing in ReactJS with a colon

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.

user_3928341 · Answer

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 (
    
      PID: {match.params.product_id}
    
  );
}