Dynamic Routes Exercise

[00:00:00]
>> What I want you to do is then to, similarly have the photos page that you have, and then go ahead and swap out the list for the child element when you ever gonna click on a specific album. And so what we wanna do is similar to what we do with to dos, we wanna be able to allow us to click on a photo and then see that ID.

[00:00:24]
So what we're gonna do here is similar to the to dos, we'll have a photos directory, and we're gonna do is we're gonna also create another square bracket id.view. And so once again just to prove that this works, we're gonna do const.route = useRoute, and then all we're gonna do here is basically say hey, for this we're going to say photo Id is route.params.id.

[00:00:53]
And so actually let's go ahead and just make this an h2 class subtitle, that way at least has some sort of styling at it, hH2, great. Okay, so what we need to do is inside of our photos here we need to do one or two things. We need to one, actually wrap the image, so I can go ahead and just do the nextLink component, just like that.

[00:01:19]
And then the NextLink component will bind to, we'll have to do a v-bind cuz this is a dynamic piece. Where it'll be /display/photos/ what? /photo.id. Once we have that, then we can afford to then wrap that around. And that should loop around the entire image. Now, let's see if this actually works, shall we?

[00:01:39]
So we go inside of the photos, and then we upload that, there we go. There you go, everything showing up. We can see now if we hover over, you'll see that on the bottom left, it's a little small but it says local host 3000, display photos 1, 2, 3 as you'd expect.

[00:01:54]
So if I click on 3, we'll notice nothing is happening yet, and that's because we forgot step two. And step two is we need to actually show it, we need to tell it where to render. And so what I'm gonna do here is we're gonna actually go ahead and wrap this in a div because we're in a page.

[00:02:09]
And so for now, let me just call this, I'm gonna do class section. And then once again, I'll just do Photo.Gallery at the top. And then we'll have the NextPage as like the top level. And we'll basically make it a conditional if, route.params.id is true, basically, if an Id actually exist, then go ahead and show this.

[00:02:30]
Otherwise, we're gonna show this base display component. And so we still need to actually wait routes already defined up here. So actually, we're good to go. So as you can see, actually it automatically refreshed already. Cuz it said, hey, you have a parameter of three, so let me show you photo id 3.

[00:02:47]
And then once again, we can go back, it loads up, everything is good. Let's switch it out to another one, a6 coming on in. So that's how the dynamic parameters work. And there's more to it than that. But those are the foundations you need to basically use that.

[00:03:00]
And with that, you now have covered basically the fundamental skills you need as far as routing goes and paths. So we have the ability to create file based routes. We learned how to create nested routes, and then two types of nested routes, one where we have a nested view where we could actually put it on a specific part of the page.

[00:03:19]
Or we could have it just take over the entire page, which is what most people typically want. And then finally, we have dynamic routes where especially when we're fetching from an API with the parties, it's a third party source of data. We can't guarantee how many things it'll be.

[00:03:32]
And so this is why a build time things like nuts, which we'll show in a little bit, will actually help us to fetch it all at build time, generated all statically. And that's really great for performance optimizations. But from a programmatic perspective, we still need a way to handle that, hence dynamic routes.