All right.
And up next, let's see how we can set up the error page.
Now, error handling is going to be a big part of this project.
So we will return to this topic multiple times because not only we can set up one global error page
for all of the pages, but also we can add the error element for a single page and we can handle errors
differently whether we're fetching or whether we are submitting the form.
So all of that is coming up.
For now.
We're only worried about 404 errors.
Now, what are four over four errors?
Well, essentially it's an error if.
Let's say user is looking for some resource that doesn't exist.
Let's imagine that I navigate to a contact page.
There is no page at the moment.
We'll see this one on the screen.
So this one is coming from React Router and they very nicely explain what do we need to do?
Basically, since at the moment we have the nested route setup, since we have the parent route, we
can nicely add the error element, set up the error page and pretty much.
For all the errors.
Like I said, they will bubble up.
So if there is an error inside of the page, it will bubble up to that global error page.
And again, in our case, we're just really worried about 404.
So if the user cannot find the page and then later we'll discuss other errors as well.
And let's start by navigating to app.
JS So we're looking for the parent.
That's the first one and we want to go with error element, that's the prop.
And then what do we want to display Now if you want, of course you can type here the let's say heading
one with error page.
But a better approach is to set up the separate page since that way we can display a better result and
also handle multiple errors and that type of thing.
So in here, let's look for error page, which we set up.
Let's add a comma so we don't have syntax error and check it out.
Now, if the user is looking for a page that doesn't exist, we display the error page.
Now let's navigate over there and let's see how we can use use a root error, a hook which is provided
by react router dom to get the actual error and the way it's going to look like.
Let's go over here and again, I think I'm going to set up a div so there's going to be a parent since
I want to set up a link as well.
So first we'll grab the link element from React Router.
Dom, where do we want to navigate?
Well, let's say that.
For now, we're just going to go back home.
Eventually this is going to be Dashboard, but let's not worry about it right now.
So let's set up the div over here.
Let's save it again.
We have the semicolon over here and basically, like I said, we have this hook use route error, which
is going to give us an info about the actual error.
So let's go with const error is equal to use route error.
Let's invoke that and for now let's just log it.
And essentially we're doing that.
Because I want to showcase that there are multiple errors that we can have in our application.
So it's not only going to be the 404 errors.
And if I take a look right now at the console, I'll see this object.
And it nicely gives me all of the info I'm looking for.
So basically notice the status is 404 and then the status text is not found and rest of the useful info.
And of course if we'll have a different error, this data is also going to change.
And what's really cool about React router Dom we have multiple ways how we can handle different errors.
So again in order to.
Set up the error page.
We need to look for the parent.
We want to go with error element and we want to set it equal to either component or you can set up straight
up element over here as well.
And inside of that error page, if you want to find out more about the error you want to use, use a
root error.
And for now we're just logging.
But eventually there's going to be more logic.
And in here, if I click on back home, of course, I navigate back to the home page.
So if I'm going to look for about page, which again doesn't exist, same deal, I go to error page
and then I can nicely navigate back home.