Get up to speed with dynamic/parameter based routing in the new app router by adding a very basic Link and a dynamic route that the Link will navigate us to
Instructor: [0:01] The last piece that we need to add before we're ready to completely move our pages app to our app router is dynamic routing. Here, we can come in and let's just add the import link from Next Link. Then let's paste our link here. All this is saying is let's go to the dashboard route and to this customer name.
[0:26] If we save this and come back to our app, we see we get Michael Scott. Now, if we click this, we'll get an error because we currently don't have a route set up for this. We can come into dashboard and let's create a new file.
[0:40] We need to give it the brackets and let's call it Customer Name. Then we need to give it a page.tsx. Here, we can simply say export default function customer and we need to pass it params. The params get typed as customer name string.
[1:06] Then we can just return an h1 with params.customerName. Now, if we save this, we come back. Let's go back to our dashboard and let's click on Michael Scott. We see we are getting Michael Scott's name right here and we're still getting our dashboard layout right here. That is all that you need to get started with dynamic routing.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!