Creating dynamic product details page with dynamic routing

Technical Questions
, ,
1

I try to create a dynamic product details page.

  1. First I created a home page(http://localhost:3000/home) where I am getting the list of products through an API as added API data source by following your Connecting API documentation.
  2. Now I’ve added details page link (http://localhost:3000/product-details/productId) on product card, where ‘productId’ should be the id of product I am clicking, which will be retrieval on details page through which I can hit the API with the same ‘productId’ in order to get the details.

Issues:

  1. The url with productId is not working “http://localhost:3000/product-details/productId”.
  2. I am unable to retrive the ‘productId’ in details page.
  3. I need to hit details API onload as we get the productId but nit getting the idea to achieve it.

It would be great if I can get any end to end documentation over this type of use case or suggest me the solution and approach to achieve it.

Thanks!