00:00 Let's start by running npxremixroutes to get an idea of our current route layout. So we have our routes, here is our root route, so that's that root TSX, and then our route index,

00:13 it's our index route for this URL segment, which is just slash, and the files routes index TSX. So we don't have very many routes here. Let's get started with our user profile page. So that's going to be slash user, slash username. We're hard coding our username right now, so that will just

00:32 be Kodi. So let's make a new file in here. There are a couple of ways that you can do this with RemixFlatRoutes. I want to have a directory for all the stuff under the users route, and so I'm going to say users plus, and then make our Kodi profile route. So let's say kodi.tsx. Now in here,

00:50 I'm just going to copy and paste our JSX here, and we'll save that. And with just that, now if I run npxremixroutes, we should now have another route. This is at the path users Kodi, and so if I go to slash users Kodi, then I've got that Kodi route. So that is working swimmingly. Now the next

01:09 thing I want to do is have a notes route, and that is currently 404, because we don't have a route for that. But the interesting thing about this one is, I don't want this to be nested within the user profile page, even though the URL hasn't nested. That's sensible for a URL, but as far as the UI

01:27 is concerned, I don't want it to be a part of this UI. I want it to be like a separate page altogether. And so for that reason, we're going to make this route have an underscore as part of the RemixFlatRoutes convention. So we're going to have Kodi underscore, and then I also want all of these

01:45 routes to be together in their own directory. So I'm going to use the plus syntax for that, and we'll say slash notes.tsx. Now this would be equivalent to say Kodi underscore dot notes.tsx,

02:00 and this is something that you just have to kind of get used to as you're working with the route convention. I recommend, especially as you're getting started, that you just have the documentation and that reference table to get an idea of the different file name options that you have.

02:16 But typically, this is as far nested as I'm going to go on my route hierarchy as far as the file system is concerned. I don't really like to go too much deeper than two or three levels as far as the folders are concerned. But we've got a couple of files that we're going to put

02:33 in here, and so it just makes sense to put those in their own folder. So in any case, now that we have this, let's go ahead and grab our JSX for this. So we're export default function notes route. And so now if I say notes, then I've got my notes route here. We can run NPX

02:51 remix routes, and we'll get that route here. Now it's an important thing to point out because we have this underscore as far as that remix flat routes convention is concerned. It says that underscore means no child route. These are not nested as far as the layout is concerned. And so

03:08 that's why all three of these are siblings. They're all nested under the root route, but they're siblings to each other because none of them is nested under the other. The user's route is not nested under the index route. And then because of that underscore in our convention, that's saying

03:24 that this notes route is not going to be layout nested in the user's route, even though the URL is nested. So with that set up, we actually are ready to do our right side here for a particular note. So I want to be able to go to some note ID, and then I should see my list of notes on the left.

03:44 Eventually we'll have that. So effectively just want to see this. And then on the right side, I want to see the some note ID route. So this is where we're getting into some nesting. So to do this, we're going to add a notes dot. So I do want to have the notes part of the URL. And instead of

04:03 doing another folder like we were doing before with the plus sign, we're going to use dot to signify our slash in the URL. So we'll say notes dot some note ID dot TSX. And then I'm going to copy the JSX for that and save this. And then we can refresh. And now that's interesting.

04:24 If I run remix run routes, I see, yeah, this is exactly what I would expect. I've got that nesting going on right there. So this may have caught some of you by surprise. So what's going on here is this route is responsible for everything that's displayed on the page.

04:41 Layout wise, as far as the UI is concerned, starting from notes on down. So everything from here on down, we are responsible for what is displayed there. But we want to have like some

04:55 segment of that UI to be the responsibility of our child route, because we're rendering that some notes h2. So the challenge here, though, is that remix doesn't have any way to know why where we

05:10 want that h2 to appear. And so we have to tell it and we tell it by using this outlet component. So with that, I save that. And now that we've told remix where we want the child route to go, it's going to place it right there. And we're actually we were already using this component

05:29 in our route. So if we look right in here, we have that right here. So in fact, we are already nesting in some of our UI for this route route. All of these are children of the route route. And that's pretty much the typical setup for all of this. You don't typically just have a single

05:48 page, you've got multiple routes. And so you're going to render your outlet in that route. And so parents are responsible where their children go. As far as these route conventions in the layout is concerned. We didn't have to worry about that with Cody and notes, because even though the URL

06:03 segments are nested, the layout is not thanks to the convention that we have established here with that underscore, that trailing underscore saying, Nope, this layout is not nested. And so we didn't have to worry about that earlier. Alright, so the next thing that we need to do with this is we want

06:21 to add an index route. And so this the index route is basically like what we want to have show up in the outlet area when there is no segment in the URL. So in this case, we're going to have a list of notes that they can select. And then the details of those notes will appear in this

06:39 child area. But if they don't have anything selected, then we probably should tell them, hey, you got to select a note. So this is that's the idea of an index route. And we're going to create one right here with notes dot index dot TSX. So this index piece is part of the convention

06:57 that signifies that this is an index route. So we create that file. And then we Yeah, it's not going to like that very much. So let's copy this over. And now it will be much happier with that. So we refresh and we've got select a note. And if I go slash some note ID, then we're going to get to

07:15 our some note ID. So there we go, we have our profile route, we have our some note ID, we have our index route. So we're all set as far as our where the different files go is concerned. We've got still plenty of work to do to make this a real note app. But we're in a pretty good place. So

07:35 we use the plus convention from remix flat routes that allows us to group different files based on the folder. We're using the underscore convention to signify a certain segment of our routes that should not be nested as far as the layout is concerned. So as far as what you see

07:53 on the screen, even though the URL is nested, those routes are not layout children. But then we also have this notes route, which is the parent of these two routes right here, and will be the

08:08 parent of more routes in the future. So that is getting remix flat routes all set up conventionally in our remix application. And we'll get to improving this a little bit in the future.