1
00:00:00,230 --> 00:00:00,860
All right.

2
00:00:00,920 --> 00:00:05,140
And up next, let's work on the error page so we're done with the landing.

3
00:00:05,150 --> 00:00:07,520
Let's also knock out the error page.

4
00:00:07,520 --> 00:00:10,220
And essentially, we want to navigate to the pages.

5
00:00:10,220 --> 00:00:16,850
We're looking for the error one, we already have the import for the link and use a root error, but

6
00:00:16,850 --> 00:00:24,410
we also want to import the IMG, the not found image and the wrapper from the wrappers.

7
00:00:24,410 --> 00:00:26,570
So I guess let's start with those two.

8
00:00:26,600 --> 00:00:31,160
First of all, let's grab the wrapper and in this case it points to a landing page.

9
00:00:31,160 --> 00:00:32,270
That's not correct.

10
00:00:32,990 --> 00:00:35,660
The file we're looking for is error page.

11
00:00:35,930 --> 00:00:38,420
That should be the correct one.

12
00:00:39,600 --> 00:00:40,380
Okay, good.

13
00:00:40,380 --> 00:00:43,170
And then let's also grab the image.

14
00:00:43,470 --> 00:00:47,460
And the image name is not found, so I'm going to go with import IMG.

15
00:00:48,600 --> 00:00:52,380
Then from we're going to go to the same place, the assets.

16
00:00:52,380 --> 00:00:57,390
In this case, we're looking for images and the name of the file is not found SVG.

17
00:00:58,350 --> 00:01:00,090
And once we have this one in place.

18
00:01:00,830 --> 00:01:03,020
Now let's actually set up the return.

19
00:01:03,050 --> 00:01:08,960
Now, in this case, we're going to have two returns, because remember, when we initially covered

20
00:01:08,960 --> 00:01:13,240
the error page, I mentioned that we can have you possible errors.

21
00:01:13,250 --> 00:01:17,150
So one of them is 404 when we cannot find the page.

22
00:01:17,150 --> 00:01:20,140
But there are going to be some other ones as well.

23
00:01:20,150 --> 00:01:23,390
So we'll check for the status of the error.

24
00:01:23,390 --> 00:01:28,490
And if it's 404, then we'll return one set of elements.

25
00:01:28,490 --> 00:01:31,330
And if not, then we'll return something else.

26
00:01:31,340 --> 00:01:34,520
So first, I guess let's just navigate to a page that doesn't exist.

27
00:01:34,520 --> 00:01:35,960
We're going to go to Hello.

28
00:01:35,990 --> 00:01:38,510
This is what we should see on the screen.

29
00:01:38,630 --> 00:01:44,810
And again, if we take a look at the console, we'll see that the status is 404.

30
00:01:45,230 --> 00:01:46,370
Okay, good.

31
00:01:46,370 --> 00:01:48,260
So now let's set up the condition.

32
00:01:48,290 --> 00:01:57,920
Let's say if the error dot status is equal to 404, then we want to return a nice looking error page.

33
00:01:57,920 --> 00:02:00,710
If not, then we'll return something else.

34
00:02:00,710 --> 00:02:02,150
And I guess let's just start with that.

35
00:02:02,150 --> 00:02:02,990
Something else.

36
00:02:04,410 --> 00:02:05,880
We're going to go with the rapper.

37
00:02:06,030 --> 00:02:08,190
We're not going to return anyone.

38
00:02:08,220 --> 00:02:13,260
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

39
00:02:13,260 --> 00:02:14,040
went wrong.

40
00:02:15,510 --> 00:02:16,320
Okay, good.

41
00:02:16,500 --> 00:02:21,510
So at the moment, this is what we should see because, of course, we're not returning anything from

42
00:02:21,510 --> 00:02:22,530
our condition.

43
00:02:22,530 --> 00:02:28,080
And then as far as the nice looking 404 page, we're going to go with the wrapper instead of the wrapper.

44
00:02:28,080 --> 00:02:33,930
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

45
00:02:33,930 --> 00:02:35,430
equal to our variable.

46
00:02:35,430 --> 00:02:38,580
Then the alternative not found.

47
00:02:38,880 --> 00:02:44,460
After that, let's go with heading three with some text and I'm going to say Page not found and then

48
00:02:44,460 --> 00:02:49,320
we're going to go with paragraph and in here we'll say we can't seem to find the page you're looking

49
00:02:49,320 --> 00:02:49,770
for.

50
00:02:49,770 --> 00:02:53,340
And then at the very end we'll set up a link component.

51
00:02:53,340 --> 00:02:56,850
But in this case, the link is going to navigate to the dashboard.

52
00:02:56,850 --> 00:02:57,420
Why?

53
00:02:57,450 --> 00:03:03,690
Well, because our home page is a landing one, but basically all of our functionality is going to be

54
00:03:03,690 --> 00:03:04,740
the dashboard one.

55
00:03:04,740 --> 00:03:09,840
So let's say if the user is using the application, it only makes sense to navigate the user back to

56
00:03:09,840 --> 00:03:13,350
the dashboard because this is where all the functionality is located.

57
00:03:13,350 --> 00:03:21,670
So the landing one is pretty much only for the users who visit the application for the first time or

58
00:03:21,670 --> 00:03:25,840
I don't know, they're returning users and all that, but the current user who is actually using the

59
00:03:25,840 --> 00:03:29,530
application is going to be using one of the pages in the dashboard.

60
00:03:29,560 --> 00:03:30,730
Hopefully that makes sense.

61
00:03:30,730 --> 00:03:37,600
So in this case, we're just going to go to Dashboard and remember, eventually the dashboard will be

62
00:03:37,900 --> 00:03:39,820
a setup for more nested routes.

63
00:03:39,820 --> 00:03:43,720
So at the moment we just have one page, but that's not always going to be the case.

64
00:03:43,720 --> 00:03:46,780
So let's go here with back home, let's save it.

65
00:03:46,780 --> 00:03:51,000
And if everything is correct, this is what we're going to see on the screen.

66
00:03:51,010 --> 00:03:54,580
And with this in place, we can move on to the next step.