Sometimes you need dynamic parameters within your URL paths. Something like visiting the user number one in your system or user number two, you know, post with a certain slug, so on and so forth. The way we support this in unplugged in view router is with this syntax right here. So I've got square brackets around a variable.
This lets view router know that this is a dynamic parameter. and I can expect it to be any value whatsoever, not some specific string. So in this case, ID is one, two, or three. id.
And if I back off of this here and type just a dot, you'll notice that it autocompletes for me. This is that type safety that we talked about a little bit earlier. ViewRouter knows that that dynamic param exists under what name because we're able to pass the name of the route right here. So this is one very important distinction between unplugging ViewRouter and plain vanilla ViewRouter.
Now, whenever you call use route, you need to pass an argument, which is the name of the path or the name of the route that you're wanting to use. Without this, TypeScript doesn't know that this path has an ID param on it. So we have to be very specific and tell it which route we're actually getting. So I'll save this file now.
Then over in the browser, you can see the result of this. Here is my list of users. I'll click on user one here. And of course, the user ID is one.
id. Same thing for all of the other users. Dynamic parameters don't stop here. There's actually more creative things you can do with them.
For instance, I could create an optional param of ID. The way you create optional parameters is by using double square brackets instead of single square brackets. When I save the file now and go back over to the browser, hit refresh on my current page, you'll notice I still get the exact same thing. We still have that ID of one there.
However, let me take the ID of one off the URL and just go back to slash users. Notice now we don't have the listing of users to click on. Now we have the ID dot view page, those double square brackets ID dot view page displayed, but there's just no value for route dot params dot ID. So this is the way you describe a conditional parameter.
Besides additional parameters, we can also support repeatable parameters. So I'm going to get rid of the double square brackets, which this would actually work with the optional parameter as well, but I'm just going to do it with the normal required parameter. And so putting a plus after the square brackets means that this is going to turn out to be an array. Back in the file, we have a red squiggly line here saying that user's ID is not assignable to the parameter of key of route named map or undefined.
That just means we've changed the name of our route. So I really need to add in a plus here now that matches our route name. And notice now when I go to one of these individual users, this is an array instead of a number of one or just a single string of one. This allows me also now to provide as many further pieces of the path as I want.
So this could be user slash one slash two. slash three, and then all of those pieces of the parameter will be put into the array as different items. Most of the time in your projects though, you won't need the repeatable params or the optional params. Most of the time, you'll just stick with a normal route param.