00:00 All right, step one, we got to create that splat route and with the remix flat routes convention, the way that we are going to do that is in the routes directory, we'll add a $.tsx. So this is going to match all routes that don't match anything else. And with this, we can export a function called loader.

00:18 And we're just going to return or we could throw either one will work, but we can return a new response that can be not found and then status of 404. And so now if I go here, I'm going to get not found page.

00:34 But because we don't have a default export, this is going to be treated as like an HTTP route. If you recall, we have our resources health check, which is very similar to this. It's just exports a loader, right? So we want this to be treated like UI so that we can have some UI on the page.

00:52 And so what we can do is we export a default, a function called are not found route or you can call it whatever you want. And we can return div not found. So then we go here and boom, we get not found, right?

01:10 So we could just from here, render out the error boundary and all that stuff. But to me, this actually makes more sense to throw. I don't know. You do it the way that you prefer to do it. But the way that I feel makes more sense is to throw a response.

01:29 And then we end up having an error boundary that's handled here. I think that will follow the code path and remix that is more appropriate for what we're trying to do here as well. So let's make a function called error boundary. And of course, we want to export that.

01:45 And then I give you a whole bunch of code that I'm going to just copy and paste in here because I don't feel like it's all that useful for you to watch me write up a bunch of JSX. So we're going to bring in error boundary. We're going to bring in use location from our remix run react. We're going to bring in the link from remix run react as well.

02:05 And with this now, since we're throwing the response, remix is going to render our error boundary. It's not ever actually going to render our default export. So what I actually do in my finished version is I render the error boundary just like that. This will never get rendered because we're throwing a response in our loader. But you have to have it there.

02:24 So it gets treated as a UI route. So that's what's going on there. Great. So now we end up rendering our error boundary. We've got our location. So we're able to display the URL. And then we have back to home with the link right here. So that's going to handle our four fours. We can have like any number of routes.

02:46 Boom. It's going to be right there. And then we can click go back to home. The header still works. The footage still works. That's precisely the objective that we had here. And that's all possible because of the splat route. So there you go. A couple of the specific calls here is first, we have a loader that its only job is to throw a response for not found.

03:07 And then you export default a function. So that remix treats this as a UI route rather than just a resource route. And then you have a error boundary export to handle that for a four case. Now, I will add that splat routes can be kind of useful sometimes.

03:24 For example, if you had like some ID, and then like you could in the loader, look up in the database and see if that ID exists and then send the user over to that profile page or something like that. That could be useful. So you could definitely have more stuff that happens in this loader. But then the last thing that you do,

03:43 if you can't find anything or they're kind of lost, then you just throw the new response 404. And we end up in the error boundary. So this can be multi purpose as a splat route, but it works pretty well as just our 404 error page handler. So there you go.

04:02 That's handling generic route based 404s with splat routes and remix.