1
00:00:00,270 --> 00:00:06,730
So life is awesome, but what happens if the user navigates to a page that doesn't exist?

2
00:00:07,170 --> 00:00:09,460
For example, forward slash and armhole.

3
00:00:10,260 --> 00:00:15,000
The moment we're just rounding an empty screen, and you would have to agree that that is not the best

4
00:00:15,000 --> 00:00:15,840
user experience.

5
00:00:16,170 --> 00:00:23,190
It would be probably better if we would render some kind of error page and give the option to a user,

6
00:00:23,490 --> 00:00:28,290
navigate back to a dashboard or logging or wherever you would like.

7
00:00:28,830 --> 00:00:32,340
And in order to set it up, we will need to set up another out.

8
00:00:32,970 --> 00:00:37,650
We're going to go with our aroud component and then within that rolled component.

9
00:00:37,680 --> 00:00:39,360
We are going to place our error page.

10
00:00:39,630 --> 00:00:43,170
So, of course, the structure for the Yellow Pages are already there.

11
00:00:43,620 --> 00:00:50,360
It is already exported from the pages folder and now we just place it in the route.

12
00:00:50,940 --> 00:00:58,110
Now, in order to set up a error page, we will have to have a path with a value of star.

13
00:00:58,740 --> 00:01:07,380
Now, what that means is that this will always match whatever we are looking for, whether that is a

14
00:01:07,380 --> 00:01:09,450
home page or logging or whatever.

15
00:01:09,870 --> 00:01:14,060
So once we set up our out path prop equal to his star.

16
00:01:14,510 --> 00:01:20,850
That just means that every time we're going to navigate somewhere, this is always going to match.

17
00:01:21,320 --> 00:01:22,330
And just to showcase that.

18
00:01:22,350 --> 00:01:24,640
Of course, we show that in the low.

19
00:01:24,990 --> 00:01:31,230
But at the moment, the problem is going to be that will also display our error page in a dashboard

20
00:01:31,530 --> 00:01:32,590
as well as the log.

21
00:01:33,150 --> 00:01:34,230
So how we can fix that?

22
00:01:34,640 --> 00:01:38,100
Well, we can fix that by adding a switch component.

23
00:01:38,580 --> 00:01:41,410
So where we have the router inside of it.

24
00:01:41,460 --> 00:01:44,280
So not inside or out, but inside of the router.

25
00:01:44,700 --> 00:01:50,130
Let's add our switch component and let's wrap all our roots in our switch component.

26
00:01:50,590 --> 00:01:58,320
Now, you'll notice that we're going to display properly dashboard page once we navigate to a homepage.

27
00:01:58,710 --> 00:02:00,050
Then a log page.

28
00:02:00,550 --> 00:02:03,180
If we navigate to a log in page, of course.

29
00:02:03,630 --> 00:02:08,250
And then, of course, the halo is going to bring us the error page.

30
00:02:08,710 --> 00:02:09,570
And why is that happening?

31
00:02:09,600 --> 00:02:14,640
Well, because switch verandahs the first child crowd that matches.

32
00:02:15,240 --> 00:02:20,370
So, of course, that's why when we navigate to a homepage, we are displaying home, because that is

33
00:02:20,370 --> 00:02:22,800
the first one that matches our path.

34
00:02:23,370 --> 00:02:24,750
Always matches, like I just said.

35
00:02:25,410 --> 00:02:28,140
So when we navigate to a page, it doesn't exist.

36
00:02:28,470 --> 00:02:30,720
That's where displaying the error page.

37
00:02:31,290 --> 00:02:32,490
That should do it for a router.

38
00:02:33,100 --> 00:02:36,300
Now let's start working on some more interesting things.