Your First Route Solution

[00:00:00]
>> Okay, that was riveting, right? [LAUGH] Let's see if I can do this in 10 seconds. No, just kidding. But it was pretty quick and that was intentional. I always liked the first exercise to be pretty straightforward. And I should probably count all that by saying if it was not quick for you, don't feel bad.

[00:00:20]
But this is what we're doing here is adding a link to the post route. So the link component comes actually from react router and it's just wrapped lightly by remix. And so we have link to the post route. So we're gonna slash posts. And so if I save this and come over here and click on blog posts, that's gonna take me to a 404 page cuz I haven't made that route yet.

[00:00:46]
So let's come back over here and we're gonna make a new route following the convention. The file convention that remix currently supports. I say currently, because actually in version two we're thinking about switching this convention a bit to make it scale better. And just make it a little bit nicer to work with.

[00:01:08]
And fun fact, you can actually configure this convention yourself. And somebody actually has built a package that you can use to use the convention that we're thinking about today. So if you wanted, it's a remix flat files or something like that and is what it's called. But you can configure routes at build time.

[00:01:31]
Programmatically within the remix.config. If we do end up switching the remix convention with the next version of remix then we'll also release a package that allows you. To use the old convention so you can upgrade and not have to move your files all over the place. In addition we'll probably also have a code mod that will automatically move your files for you.

[00:01:54]
So don't worry remix is built by three. Well, is headed by three people who have been maintaining NPM packages for a very long time. We totally understand how frustrating it is, to have breaking changes that like blow everything up. So, yeah. Ryan and Michael have been maintaining react router for a long time.

[00:02:14]
It's used by, the majority of the react to community I built a testing library also used by the majority of the react community. We are very cognizant of breaking changes and so any breaking changes in V2 will have a nice and smooth upgrade path. So anyway this is the convention that we have currently and it's nice.

[00:02:34]
So we're gonna make posts/index.jtsx and this is the route module that's gonna be rendered when the post route is active. So coming back over to the readme I'm just gonna copy this for our default export. Default, function. I'm gonna call this the posts route. And there we go.

[00:03:02]
So now if I go to blog posts there it is, posts, hooray, magic! Cool. That is it for this one any questions about the file based routing convention. Yes.
>> Flat routes what are the received benefits.
>> Yeah, so the benefits will become more clear when we start getting into nested routing but a lot of it has to do with the parent route is a module.

[00:03:35]
And then all of its children go into a folder and they're like separate in the file system just the way it's organized. And so it's kinda annoying when you have a lot of routes. So the flat file routes just allow the parent route to be right next to all of its children.

[00:03:50]
And in addition, when you get a sizable application with a lot of routes, you have just tons of folders to go through and it's super annoying. So this will help reduce that. The the trade off, of course, is now because they're flat, you just have a lot of files in a single directory.

[00:04:06]
And so this is why I think it's actually quite nice that you can configure the convention or or make make up your own convention however you like in the remix config. But even in the case where you've got lots of files, I actually still think that's not a big deal because what are you trying to do you're on your day to day.

[00:04:26]
If you get a message from your PM that says, hey, we need you to update this feature on this thing. Well, it's always gonna come with what page is this on, right? And so, your objective is how fast can I go from? I know what page this is on to the file that this code is in.

[00:04:45]
And in both cases just having a convention makes it really easy to find which file you're looking for. So I'm not super concerned about having a directory with a ton of files in it. And on top of that I believe that the convention allows for directories as well but we're not gonna go too deep into that I tried to avoid talking about things that haven't shipped officially yet.

[00:05:10]
But I want you just to be aware that the convention could change.
>> When using use loader data, is there a way to show a spinner or a loader to show the user that the data is being loaded?
>> Yeah, so we're not gonna get into showing loading spinners for the loader today, but in the advanced remix workshop, we do.

[00:05:30]
We talked about the different API, which we'll use for that.