00:00 For us to make this stuff dynamic, we're going to need to rename some of these things. So, typically in a routing system, the dynamic portions of the URL are signified by a colon, but we can't use colons in the file system, and so instead we use the dollar sign because we like

00:17 money a lot. I'm just kidding. Well, I mean, I kind of like money, but yeah, so we're going to say dollar and then username. That's the name of the param, and we'll have to do the same thing here to keep these related in that way. So, we'll say dollar username here as well,

00:34 and then to make the some note ID update appropriately, we're going to add a dollar note ID, and now we have access to those params. So, all of this will continue to work as it did before. It still matches, but the fact is that it matches more than it used to, and so here we can

00:54 say, you know, whatever, and that will continue to work because that still does match our route, but that's not exactly what we want necessarily because I want to show the username in that place where we have Kodi. So, let's start there. If we go to the username route, we're going to render

01:12 the username instead of the hard-coded Kodi. To do that, we get the params from use params from Remixer on React, and then right here we say params.username, and now how do I know that it's username? It's because that's the name of this file. So, if I were to change this to Bobby,

01:31 then this would be Bobby, and that's how you would make that work. Of course, I don't want it to be Bobby. I want it to be username, and Remix isn't super jazzed about the fact that I had those two separate, so I think that's why it's giving me this big error, but here we'll say username and

01:50 refresh, and now we get the username displayed there. So, I can say Peter, and that works just fine. Now, if we go to our notes, it still says back to Kodi, and it shows us the some node ID. So, let's go over to our notes route, and we'll update this to use the params as well. So, we get

02:07 our params, use params from Remixer on React, and then down here we say params.username, and that's an important aspect here too. So, even though this doesn't have a param in the file name

02:24 itself, as far as the convention is concerned, it has that access to that param because it is nested within a route that does include that param. So, that's how we have access to that

02:37 param. Okay, and then we also have this some node ID. We're going to add more lists of notes later, so we're going to just leave this as it is, but here now we have back to Peter, exactly what we were looking for. Now, the last one we want to deal with is this node ID route. So, instead of just

02:56 saying some node, we want to display the node ID. So, let's get our params, use params, and that comes from Remixer on React, and then here we'll say params.nodeID, and again, it's node ID because

03:11 the param right here is node ID. Now, you technically can do kebab case, but then you'd have to kebab case access this, and that's kind of annoying. So, I'd rather just do the camel case here. That's why we're doing it that way. Okay, great, and so now we're displaying the ID, and it

03:27 means that whatever we put in here, I am cool, that's going to show up in our route. So, we now have support for dynamic route segments, and we access the value of those dynamic segments in our

03:42 UI with use params. We'll look in a future lesson or exercise on how to access this to determine what data we load from the backend, but this is a good start for us to access the params in our UI.