All right.
And up next, let's work on the error page so we're done with the landing.
Let's also knock out the error page.
And essentially, we want to navigate to the pages.
We're looking for the error one, we already have the import for the link and use a root error, but
we also want to import the IMG, the not found image and the wrapper from the wrappers.
So I guess let's start with those two.
First of all, let's grab the wrapper and in this case it points to a landing page.
That's not correct.
The file we're looking for is error page.
That should be the correct one.
Okay, good.
And then let's also grab the image.
And the image name is not found, so I'm going to go with import IMG.
Then from we're going to go to the same place, the assets.
In this case, we're looking for images and the name of the file is not found SVG.
And once we have this one in place.
Now let's actually set up the return.
Now, in this case, we're going to have two returns, because remember, when we initially covered
the error page, I mentioned that we can have you possible errors.
So one of them is 404 when we cannot find the page.
But there are going to be some other ones as well.
So we'll check for the status of the error.
And if it's 404, then we'll return one set of elements.
And if not, then we'll return something else.
So first, I guess let's just navigate to a page that doesn't exist.
We're going to go to Hello.
This is what we should see on the screen.
And again, if we take a look at the console, we'll see that the status is 404.
Okay, good.
So now let's set up the condition.
Let's say if the error dot status is equal to 404, then we want to return a nice looking error page.
If not, then we'll return something else.
And I guess let's just start with that.
Something else.
We're going to go with the rapper.
We're not going to return anyone.
We're just going to go with Div and inside of the Div we'll set up a heading three and we'll say something
went wrong.
Okay, good.
So at the moment, this is what we should see because, of course, we're not returning anything from
our condition.
And then as far as the nice looking 404 page, we're going to go with the wrapper instead of the wrapper.
We'll place a div and then we want to set up a image As far as the source, of course is going to be
equal to our variable.
Then the alternative not found.
After that, let's go with heading three with some text and I'm going to say Page not found and then
we're going to go with paragraph and in here we'll say we can't seem to find the page you're looking
for.
And then at the very end we'll set up a link component.
But in this case, the link is going to navigate to the dashboard.
Why?
Well, because our home page is a landing one, but basically all of our functionality is going to be
the dashboard one.
So let's say if the user is using the application, it only makes sense to navigate the user back to
the dashboard because this is where all the functionality is located.
So the landing one is pretty much only for the users who visit the application for the first time or
I don't know, they're returning users and all that, but the current user who is actually using the
application is going to be using one of the pages in the dashboard.
Hopefully that makes sense.
So in this case, we're just going to go to Dashboard and remember, eventually the dashboard will be
a setup for more nested routes.
So at the moment we just have one page, but that's not always going to be the case.
So let's go here with back home, let's save it.
And if everything is correct, this is what we're going to see on the screen.
And with this in place, we can move on to the next step.