Nested Routing Solution

[00:00:00]
>> So in Nested Routing, we're just getting a little taste of it in this exercise, but hopefully enough to be able to understand how the conventions and APIs work so that you can implement it in your own projects. So we have a couple of files that we're gonna create, the admin route, the new route, and then the admin index route.

[00:00:21]
And we'll talk about when each one of those is gonna be active. But the first one I wanna change actually is the index that'll link to all of these. So if we go to our app routes posts index. The index routes are basically what should be on the screen when there are no child routes.

[00:00:39]
If I have no other sibling child routes that are currently active this is what should be rendered. And so In here, we're going to add an admin link. So I'll just say link to admin. And just for the fun of it, we'll add a class name. Gotta spell it right doesn't work if you spell it wrong.

[00:00:58]
Text red 600 and underline that. Okay, cool. So we've got an admin we go to blog posts [INAUDIBLE] we're gonna get a 404 because there is no, well, there's no post called admin. But we're also gonna have a route called admin. So you won't be able to have a post called admin sorry, gives the our URL structure here.

[00:01:19]
You could change it if you want it to, I suppose. But one thing that I wanna call out here is that this is a relative route. So if you've been using React Router for a while, until version 6, when nested routing became a thing, you had to construct these.

[00:01:35]
And so you'd have to say slash posts slash admin. And that was kind of annoying. So yeah, now the link is intelligent and knows where it is in the route hierarchy. And so it will automatically nest. Now, of course, we can if we want it to go to slash admin then you can do the full route if you want but we're just gonna do that as a sub route.

[00:01:58]
Cool, so now let's make that sub route, we'll make an admin.tsx. This is gonna be our parent route. So this is a sibling to the slug. Because the URL is actually a sibling to the slug as well. Slash post slash admin. We have slash posts slash my first post.

[00:02:14]
So they are siblings, but this ones gonna be a special one. Because it is going to be a parent route, and I'll show you what makes it apparent route here in a second. So let me grab this jsx for our admin will export default a function called admin route.

[00:02:32]
By the way, it doesn't matter what you call it, it's just a react component. So call it whatever you want. And now we've got all that jsx. So we've got to load up these posts. We gotta bring in this link from remix, run, react. And then we've gotta a job here to do that we'll get to here in a second but let's get these posts in here.

[00:02:53]
The posts for the admin route are it's basically the same loaders we have and the post listing route because we just wanna list of posts here as well. So I'm gonna borrow all of this and stick it right there. Now, somebody asked me earlier. How do you do code sharing between different loaders and things like that like how big do your loaders typically get?

[00:03:17]
And I would say for the most part my loaders don't typically get very large but I should say It's just JavaScript. So you do it however you wanna do it it's like once you're inside this loader there's no special hooks or anything like that. And that makes a loader, loader.

[00:03:38]
It's just JavaScript. So if you wanna share code and whatever, this is not terse enough for you, then yeah, you can make a function and call into that function if you want to. For me this is plenty. Also, I prefer function declarations. So we're gonna switch that. So we've got our loader.

[00:03:55]
We've got our list items. Now let's get our posts from use loader data type of loader. And now TypeScript is telling me we're all good. So if I come over here, now we've got our loaders. Now, if we click on one of these, we're gonna get a 404 because this is taking us to /post/admin/slug.

[00:04:15]
We don't have a route that matches that. So we're gonna get a 404 for that. So let's see, what's the direction I wanna take this? I think, yeah, we'll create the route first and then we'll talk about why that route is not working. If I get to a point where I'm like [INAUDIBLE] why isn't it working?

[00:04:34]
Remind me because I didn't do this part [LAUGH]. And I've done this before. And it took me like, 2 minutes to figure out why I was messed up. So we want to have where we're linking to is slash posts slash admin slash luck. So we need a sub route, we need a child route of admin.

[00:04:52]
So we're going to make a directory called admin. And under that is going to go our $slugtsx file here, except I just remembered we're gonna get to the $slug later. Right now what we're focused on is the index route and the new route for creating new posts. We'll get to edit and update, or edit and delete in a future exercise of the workshop.

[00:05:17]
So here we'll make an index.tsx. So this is what should be displayed at this route when we're just at slash posts slash admin. And so for this one, it's actually pretty simple. It's just a link to create a new post. So we'll make a remix component and return that.

[00:05:41]
Let's call this AdminIndexRoute. And we'll bring in the link. And then we'll thank our lucky stars for prettier. My goodness. Do you remember what it was like to code before prettier? What a joke. Can't believe we did that. Yeah, man. Thank you, James. Okay, great. So we've got our index route.

[00:06:02]
Let's also make the new.tsx route here as well. And we'll borrow the jsx. Yeah, that's [LAUGH] right. We'll get to the contents of this route here in a second. But it's for now just gonna be new post and new post route. Okay, great. So we've got all of our route files working.

[00:06:24]
There's one last piece here, though that needs to be done. So If I go create new posts, nothing happened there. When I'm on admin, I'm not seeing that thing that links me to create new posts. So what's going on? What's going on is admin. This admin tsx module is a parent route.

[00:06:45]
It's a layout route. It's responsible for laying out its children. And so that is what this bit is. We wanna say hey I wanna have a list of all the posts and then in my main area I want to have all my children. This is where the new form should go.

[00:07:01]
This is where the editing or updating posts should go. This is where my link to create a new post should go. And so we're going to use the outlet component from remix run react, to say hey remix if I have any children this is where they go. And so now we have I create a new post right there.

[00:07:21]
And this is rendering because we don't have any additional segments beyond admin. So this is our index no children this is what should render that's what the index is no children render this. And then if we go to create new post now we're on slash new now we do have children let me find the route that matches that one and I'll render that in that spot.

[00:07:43]
So that is the idea of nested routing. You have the parent, parent is responsible for rendering the outlet. And that's where children go if their children. And yeah that's it there's no extra credit on this one. So that is the exercise. If you want to or if maybe if you did it we can look at exercises/04, npx remix routes.

[00:08:07]
And see the route structure there, where we have our route. We actually have had a parent route this entire time. It's your root route. Then we have our post log, our post slash admin and then that has two children there. That is the structure of nested routing.