Dynamic Routes

[00:00:00]
>> Routing clearly has a lot going on and we got one more major piece that comes up when it comes to defining routes. Which is the fact that, if I were to ask you right now to define a route for like every to do item on the page, that'd be hard to do.

[00:00:14]
At least let's see photos there's 5000 photos can you imagine if you were like photos slash one, photos slash two, and more importantly you can't even guarantee, it'll be that many items, right? So how do we deal with that? So dynamic routes are the next thing I do wanna make sure that we cover.

[00:00:28]
So how does that work? Well, the way that works is let's go ahead and inside of display, I'm gonna go and do the to section. And so we'll say okay there's a new folder call to dues, so one of things we could certainly do is drop to dues inside of the folder and do index dot view and that way it's own page.

[00:00:44]
But for the sake of practice and showing you all different examples. This is where we're gonna actually use a child route in this particular case, cuz we wanna actually be able to go, yes, okay? So when we're inside of this to dues page and we click on a link, we only want that session to swap out.

[00:00:59]
We want the list to disappear, we want the item to come in, that's what we want to look for, so that's how we're gonna design. The way you just the way you tell nutex that you want something that's dynamic, and this, I think starts to become a convention It's the square brackets.

[00:01:12]
And the square brackets whatever goes inside is the name of the parameter that is dynamic. And so you can call it whatever you want, but in this particular case, and in a lot of cases, it tends to be very, very cool common. So once we get this well we can do so let me open up a script file block is I'm gonna first open up an h2 element and this is task, ID and which ID we can use const route = used route.

[00:01:40]
And then from here, if I remember this correctly, we should be able to actually log out the params and this time I've realized I had it flipped earlier. So to make sure this works though, don't forget because we're actually looking to get into the child at that point.

[00:01:53]
We do have to do a couple of things which is one, we need to wrap our to do that title with a next link, that's going to actually allow us to jump to that page. And so what it's gonna be it's going to be a dynamic string whereas only slash, all we need the to property, that's why it's not coloring correctly, okay?

[00:02:17]
To slash display slash to dues slash, to do ID, this is the path that we're looking for and I'm missing this here, there, yeah now that looks good. Does that make sense? That's how, as far as how I constructed that dynamic URL, great. Okay, so now that we have that we need one more thing.

[00:02:35]
Which is we need to actually display the next page, right? This is what we talked about before, because we want children elements to be displayed within a specific section of the page. We don't want the whole thing to refresh. So if I just wrap all this in a div, because now we're at the page level, okay, we go back to here, and then let's refresh whoops.

[00:02:59]
What did I do Boolean? A Boolean somewhere, it was here. That doesn't make any sense at all, there we go, much better. And I realized this is a buggy thing that I need to see fix let me just wrap that there you go much better. Okay, so now our server should be much happier with us great we can go to dues.

[00:03:21]
Okay,great. So now when I click on this you will notice, down here there it is this is task ID basically one. And we said we wanna swap out the list right so what we can really do actually is we can say Vf I'm gonna guess on this one paron ID is todo I think, okay.

[00:03:49]
If it's true, actually this is what we should do. If it's true, we will display the subpage, this is probably the easiest way to do it. If there's the parameter ID on the URL, when we're in this page display the sub page otherwise display the list, just like that.

[00:04:08]
So then just to give some continuity to all of this was a this is mine to do you're just like that. So if I refresh this okay, it's looking a little ugly to me for a second so let's just fix this wrap it with a section give this class a title these are all coming from Beaumont I'm gonna look that up later.

[00:04:28]
There, you're much better. So you see, okay, we got we got our task ID, this is good and if I go back to the page, there we go. I mean, so there's some duplicate stuff here happening but you can see here that we're actually able to now dynamically generate a page that has that data.

[00:04:44]
And then of course, you can go ahead and pull whatever you wanna like, you can filter it, etc, but we won't need to dive into that. So does that make sense as far as how that dynamic query like works? And so the key thing to remember is that this thing that we define on the right here, in the square brackets, It's part of the parameters that's part of the route.

[00:05:05]
Cuz earlier remember I was trying to do params on like the name and that was like messing up, right because parameters the wrong thing I was thinking of this part. The dynamic part is where those parameters the rest of that those are like path matching you got to figure that out on your own