4.8 Challenge: Route Not Found

In this challenge, we begin with a simple application that has a home route. And our challenge is to add a route to redirect unhandled routes to a Route Not Found component. I want to say before we get started here that we are using the version of React Router that we used throughout this course. And so, that means it's a little bit of an older version of React Router, which has changed its API recently, with the release of React Router 4. However, the general concepts will be very similar here. So maybe as some bonus work after this lesson, you can go take a look at how you might do this with React Router 4. But honestly, it's not too different. So if you're gonna do this challenge yourself, go ahead and fork this codePen. And you can pause this video now because I'm going to show you what my solution will be. So right now with our homepage if I click page A or page B, you can see that nothing happens because we don't actually have a route for them. So when our link come on here tries to move to /A or /B, there is nothing to go and so it just does it. So what we need to do is add a general route that will match anything that is not already matched. Now for the most part, when you have sibling routes here in a React Router, they will match from top to bottom. So, we need to put our catch all route at the very bottom. So this is going to be a route and the path is just going to be an asterisk. So it matches everything. And then the component, we'll call it RouteNotFound. Now all we have to do is make this component. So just above this let's create a function called RouteNotFound and this is going to take some props. And this is gonna take some props and we can actually say what route that was I found was. So we can say the route and then I will put it in there in a second and what to say was not found. So what are we gonna put in here? Well, it's going to be prompts.location.pathname. The [INAUDIBLE] router gives us a location property and from that, we can get the path name, which is the URL that the user tried to navigate to. So now if I click page A, you can see the route /a was not found. We can go back and go to page B and the route /b was not found. Of course, if one of these was to match, so for example, if we had route path of /a in here and and we'll just make a really quick page A component. So now if I click page A, we'll go to page A, but if I click page B, the route /b was not found. So having a not found route is really simple in React Router. In fact, I believe in the most recent version of React Router, you don't even need to specify a path. And I'm kind of giving away the instructions here, but this is a little bit more that's different in React Router 4. So, you can explore that if you'd like. But that's it for this challenge. Nice work.