Loading
Current section: Error Handling 7 exercises
Problem

Handling 404 Errors in React Router with Splat Routes

Transcript

00:00 We are almost done handling a bunch of errors in our app, but there's one more error that is a little different than the others. If I go to some route that doesn't exist, we don't even have a dynamic route that matches this URL. We're going to get this 404 error, no route matches URL, yada, yada, yada, yada. But the thing is that this is bubbling up

00:19 to our root error boundary, and so that's fine. But we could do better, right? Because we can still render the header and the footer, everything else still works. If the user's logged in, they should be able to see their avatar and all that stuff, like when we add login capabilities. So it would be nice to have that.

00:37 And so we need to have some lower route that handles this error, and then that way the root route can render properly, right? Because as a reminder, the idea is that when there's an error, the error boundary is rendered instead of the app. And so that's what's going on here,

00:56 is that the app is not getting rendered, and so therefore we're not rendering the header and stuff. So I want to at least render the header. We just need to have some component that goes in this outlet where that is where the error shows up, is inside of that outlet. So luckily for us, we have such a route convention,

01:15 a special type of route called a splat route. And so the idea of a splat route is it will match anything with any number of segments that doesn't match anything else. And that's precisely the case here. So we have one segment, but here's another and here's another and another.

01:33 We want to match all of those with a single route so that can handle any of our 404 pages where it's like, yeah, this doesn't match any URL. This is a 404, right? So that's what we're trying to accomplish here with this exercise. I actually give you quite a bit of code so that it looks nice visually,

01:52 but the idea is what you're going to be learning here. And there are a couple of interesting gotchas with this. So have a good time with it and we'll see you when you're all done.