‫Let's move on to everyone's favorite topic,
‫which is error handling.
‫Well, not really, but error handling is an important part
‫of building web applications
‫and so let's now see how it's done in the new React Router.
‫So with create browser Router
‫whenever there is some error that is thrown in a loader,
‫an action, or simply while rendering a component,
‫we can render an error element instead
‫of these elements here that correspond to the actual pages.
‫So again, if for example,
‫some error happens here in the menu,
‫we can instead of rendering this menu,
‫render an error element
‫and so let's specify that error element first up here.
‫So here in the parent route,
‫because these errors that happen here
‫in these nested routes,
‫they will bubble up to the parent route.
‫So error element and then here, let's use the error
‫that we already have.
‫And then let's of course import that.
‫And then what I want to try first is to render
‫some path that doesn't exist and so there we go.
‫So now we moved immediately here to the error element,
‫which is exactly this one right here.
‫So something went wrong
‫and then here we have this temporary message,
‫but instead of this,
‫we can actually get the actual error message that happened
‫inside React Router by using yet another custom hook.
‫So since we are using this element here,
‫which should actually be called error.
‫So since we are using this as the error element right here,
‫so right here in this property, this element here
‫or actually this component, then this component gets access
‫to the error that has occurred.
‫So let's call it error
‫and we get the error by using useRouteError.
‫All right, then let's log that to the console
‫and let's try that again and here it is.
‫So we have the status, we have the error itself.
‫And we should have some message.
‫So let's see.
‫So usually each error always has a message
‫and so that's the one that we then want to render here.
‫So error.message, but that didn't do anything.
‫So let's do error.data
‫and so here with this we get a nice error message,
‫and then we can click this button here
‫which will simply go back.
‫So it just calls this navigate function here
‫that we already know about.
‫So no need to write the same thing again.
‫But now let's try something else,
‫which is to basically create an error in a loader
‫and the way we can do that is by simply basically changing
‫this URL here or let's try something else like here.
‫So this doesn't really matter.
‫But now as we try to access the menu,
‫then after some time we get all error here.
‫Now for some reason we don't get again the string,
‫so let's just do, try to do another one.
‫Let's see what the error says this time.
‫Well here there's nothing.
‫And yeah, so here we get the failed to fetch error message
‫which is exactly what happened.
‫So let's place that here.
‫So if error.data doesn't exist,
‫then error.message will be displayed.
‫All right.
‫However, now we see that this error message
‫is really completely outside of our layout.
‫So the complete application has been replaced
‫with just this screen here
‫and so that's really not what we want.
‫Instead, in this situation,
‫we want the error to appear within the layout
‫and so we can basically also place the same error element
‫inside of any of these child routes.
‫Now in this case,
‫it only makes sense to place it here because this component
‫is the only one that is loading some data.
‫So only here things can actually go wrong
‫and so as I reload, you immediately see
‫that now the error is nicely within the rest
‫of the application layout.
‫So let's try that again.
‫And it tries for some time and then something went wrong
‫and then we get our error message.
‫Nice and this is really all that I wanted to show you here.
‫So this is the very basic and most straightforward way
‫of dealing with errors using the new React Router.
‫So basically using the error element property
‫that we can define on each of the routes,
‫it's just important to notice that each of these errors here
‫will bubble up to the parent route
‫unless it is actually handled in the route itself.
‫So by placing error element right on the route
‫where the error might happen.