From the course: Build Modern Web Apps with React, Hooks, State Management, and APIs Using Vite or Next.js

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Dynamic routing example

Dynamic routing example

From the course: Build Modern Web Apps with React, Hooks, State Management, and APIs Using Vite or Next.js

Start my 1-month free trial Buy for my team

Dynamic routing example

“

Hello and welcome back. In this video, we are going to see a demonstration of dynamic routing. For that, we have set up a product details component. We are going to look into this code in detail. And for opening our products id page dynamically, we have added a route. As we noted that this route is outside, it's not inside the dashboard. So this is all the top level routings and then you have a nested routing example and then you have a dynamic routing example. Now let's look into the code for product details. Over here we have decided the route products and the dynamic segment is actually the product ID. So this is the key that we are going to expect inside the product details component. In the product details component, we have defined an array. Each product has an ID, name, price and image. We have kept the images here in the public folder. After that, we have defined our component. our component, we have use useParams hook and we are saying that this is going to return a type of…

Contents