From the course: Advanced React Router Techniques with TypeScript
Join today to access over 25,500 courses taught by industry experts.
Dynamic routes with useParams - TypeScript Tutorial
From the course: Advanced React Router Techniques with TypeScript
Dynamic routes with useParams
- [Instructor] Continuing from our exploration of nested routes, let's take things up a notch by diving into one of React Router's most powerful features, dynamic routes with useParams. While nested routes help organize your app's structure, dynamic routes make it adaptable and scalable, especially when working with unique data. Let's build on the spicy category from our menu example. Imagine creating a dynamic recipe, we are clicking on a specific spicy recipe, takes users to a detailed page for that dish. A static route setup would quickly become cumbersome, because you would need to define a route for every single recipe manually. This is where dynamic routing shines. Dynamic routes allow you to create templates for routes. These templates adapt based on unique inputs, like IDs, names or slugs. For example, in our spicy recipes section, users might click on recipes, like /menu/spicy/spicy-jollof, or /menu/spicy/chicken-pepper-soup. As you can see, the last segment of the URL is…
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.
Contents
-
-
-
-
(Locked)
Extracting routes and structuring layout in React Router3m 46s
-
(Locked)
Understanding nested routes6m 19s
-
(Locked)
Dynamic routes with useParams8m 2s
-
(Locked)
Creating dynamic links with Link and NavLink3m 21s
-
(Locked)
Challenge: Set up dynamic routes to render a detailed recipe page2m 45s
-
(Locked)
Solution: Set up dynamic routes to render a detailed recipe page3m 21s
-
(Locked)
-
-
-
-