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" ponent: ProductDetail

How can I use product_id in my ponents.

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" ponent: ProductDetail

How can I use product_id in my ponents.

• javascript
• reactjs
• react-native
• react-redux
• react-router

1 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>
  );
}