1
00:00:09,460 --> 00:00:17,470
In this video, let's implement what is called 404, meaning if a root doesn't match any component.

2
00:00:17,500 --> 00:00:23,560
Let's go ahead and display a message, something like four or four, for example.

3
00:00:23,560 --> 00:00:29,560
This one because when I click on log in, you can see that there is no route that matches this.

4
00:00:29,560 --> 00:00:32,270
So how are you going to implement that?

5
00:00:32,290 --> 00:00:33,980
So here we go.

6
00:00:34,000 --> 00:00:41,380
So inside the app where we are rendering the component and below all your route, that is where we are

7
00:00:41,380 --> 00:00:43,080
going to display that.

8
00:00:43,090 --> 00:00:44,430
So here we go.

9
00:00:44,440 --> 00:00:48,310
Let's have a comment and I'll call this one as 404.

10
00:00:48,340 --> 00:00:53,070
Let me collapse the sidebar to have some enough room to work with.

11
00:00:53,080 --> 00:00:54,460
So here we go.

12
00:00:54,490 --> 00:00:59,800
We bring in the root and here is the implementation.

13
00:00:59,920 --> 00:01:03,100
Let me have some enough room to add some prop.

14
00:01:03,100 --> 00:01:05,370
So here you provide a path.

15
00:01:05,379 --> 00:01:13,330
But for this one, the path is going to be a stretch, meaning that if any of this one doesn't match,

16
00:01:13,330 --> 00:01:18,370
we are going to render this and the other is really important.

17
00:01:18,460 --> 00:01:24,730
So here the next one going to be the elements so we can create a component for that.

18
00:01:24,730 --> 00:01:29,380
So in case there is no root, we are going to render the components.

19
00:01:29,380 --> 00:01:36,970
So here we can create a component called not found component and then we can render inside here.

20
00:01:37,120 --> 00:01:40,900
But to make it simple, I'm going to pass in some simple texts.

21
00:01:40,900 --> 00:01:51,310
So here we go and I'm going to add each one and I'll call this one as full or for that is not found.

22
00:01:52,530 --> 00:01:54,180
So let's save it.

23
00:01:54,180 --> 00:01:56,310
And now let's check it out.

24
00:01:56,520 --> 00:02:03,630
If I visit a automatically, I have the message because there is no path or route that matches look

25
00:02:03,630 --> 00:02:04,180
in.

26
00:02:04,200 --> 00:02:06,660
If I go to homepage, I have it.

27
00:02:06,810 --> 00:02:12,120
If I go to any route, you can see that I see four or four not found.

28
00:02:12,210 --> 00:02:14,180
So that is it by that.

29
00:02:14,190 --> 00:02:22,030
So we can add some inline styling to this one by adding a color and text a line to the center.

30
00:02:22,050 --> 00:02:30,210
So here we can say that let me put everything as text align to be center of the page.

31
00:02:30,330 --> 00:02:31,890
And here we go.

32
00:02:31,890 --> 00:02:35,370
And now it is at the center of the page.

33
00:02:35,400 --> 00:02:39,810
This is how we can display not found root.