0

I am creating a Ecommerece application in React/Next Js. I want create dynamic routing with different peramaters for both product detail page and category page.

for Example if I click on category then its routing will be
https://www.mywebsite.com/my-category-page-url

If i click on any product from that category then its routing will be
https://www.mywebsite.com/my-product-detail-page-url

Note: I have already a live website with daily 30K visitors and with different tech stack which follows same url structure so I can not change the url structure.

Jagveer Singh
  • 355
  • 1
  • 4
  • 14
  • what do you mean by `same routing` ? your links should be different for category page and product details page right ? should those hyperlink should be different element or same element with dynamic links ? if so, what is the condition that determines where to route them ? – Towkir Dec 30 '20 at 10:13
  • I have two components. One is for category (Products listing) and another is for product detail page. if some one click `https://www.mywebsite.com/my-category-page-url` then it should open category component and if some one click `https://www.mywebsite.com/my-product-detail-page-url` then it should open product component. – Jagveer Singh Dec 30 '20 at 10:23
  • There must be a `router.js` file in your application that lists all the valid routes available in your application. You need to register these two routes there and point the corresponding components to their desired paths. – Towkir Dec 30 '20 at 10:25
  • not sure which router you are using, but you can have a look [here](https://reactrouter.com/web/example/basic) – Towkir Dec 30 '20 at 10:27
  • I am using next/router. – Jagveer Singh Dec 30 '20 at 10:32
  • Then [this](https://nextjs.org/docs/routing/introduction) might help – Towkir Dec 30 '20 at 10:51
  • 1
    I have handled the same issue having a file named pages/[slug].js which will be consumed for blogs and for details page of a product. Path would be https://example.com/first-blog-content for blog and https://example.com/first-product-details-product-1221. where i differentiate whether it is a blog page or product page by checking the url having "product-1221" so i load product details else i load blog content based on the slug. May be this would help your query. – Prabhu Dec 30 '20 at 15:45

0 Answers0