1
00:00:08,570 --> 00:00:14,030
In this video, let's configure our application to use React Router Dom.

2
00:00:14,030 --> 00:00:15,920
So let's get going.

3
00:00:16,250 --> 00:00:18,830
So back here this way we left.

4
00:00:18,830 --> 00:00:25,640
So how can we configure using react router dom and here we go.

5
00:00:25,850 --> 00:00:30,020
So inside the app, that is our entry point.

6
00:00:30,020 --> 00:00:34,820
So we are going to implement the navigation inside the app.

7
00:00:35,030 --> 00:00:39,200
So let's go ahead and then requires the methods we need.

8
00:00:39,200 --> 00:00:47,570
So first is we are going to structure some methods because we don't need all of the methods that came

9
00:00:47,570 --> 00:00:49,280
with React Router Dom.

10
00:00:49,520 --> 00:00:54,590
So the first one that we need is what we call the browser router.

11
00:00:55,370 --> 00:01:01,580
So this one is going to be what is called a high order function, meaning that we are going to wrap

12
00:01:01,580 --> 00:01:06,140
our entire application inside this browser router.

13
00:01:06,140 --> 00:01:14,120
Dom So for this one react router, don't behind the scene is going to inject all the methods and properties

14
00:01:14,120 --> 00:01:15,620
into our component.

15
00:01:15,890 --> 00:01:19,850
Apart from this one, we also need what is called root.

16
00:01:19,940 --> 00:01:26,690
And lastly, it is going to be the root, the differences between root and then the root.

17
00:01:26,690 --> 00:01:33,080
So this root is also a high order function where we are going to wrap our component inside.

18
00:01:33,650 --> 00:01:38,510
This one is going to take the individual component to render to the page.

19
00:01:38,510 --> 00:01:40,160
So here we go.

20
00:01:40,400 --> 00:01:43,040
So let's remove all these ones from here.

21
00:01:43,040 --> 00:01:50,600
And now let's have some fragment and here we go, or better so we can use the browser router.

22
00:01:50,690 --> 00:01:54,500
So here has browser router as that.

23
00:01:55,010 --> 00:02:03,890
In case this name is too long, we can rename using this syntax as and then the new name that is router.

24
00:02:03,950 --> 00:02:08,090
But I prefer to use the browser router instead of this router.

25
00:02:08,090 --> 00:02:09,860
The choice is yours.

26
00:02:10,699 --> 00:02:17,540
Then the next step is that I need to wrap my route inside that and here we go.

27
00:02:17,810 --> 00:02:24,830
So here we are going to call the root and then you pass in the component that you want to render.

28
00:02:24,830 --> 00:02:27,890
So here that is the root.

29
00:02:30,010 --> 00:02:33,340
And for this, it takes a couple of props.

30
00:02:33,370 --> 00:02:40,660
The first one is a puff, meaning the you are where I want to go before I can see a certain component.

31
00:02:41,290 --> 00:02:44,790
And for this one, let's say I want go to the home page.

32
00:02:44,800 --> 00:02:49,300
So I need to render that component and get that one.

33
00:02:49,330 --> 00:02:54,320
We use a prop core element and it's equal to and then carry braces.

34
00:02:54,340 --> 00:02:58,600
So here we are going to use the component I want to render.

35
00:02:58,960 --> 00:03:04,800
So let's go ahead and create one component for home page and here we go.

36
00:03:04,810 --> 00:03:13,510
So let's create one and I'll call this one as home dot G's and let's go for the component and let me

37
00:03:13,510 --> 00:03:19,960
add div and then the H one and our code is one as well.

38
00:03:19,960 --> 00:03:20,620
Come home.

39
00:03:21,190 --> 00:03:21,670
All right.

40
00:03:21,670 --> 00:03:27,310
And let me ask some dummy text here as P and let me play some dummy text here.

41
00:03:27,340 --> 00:03:27,940
Great.

42
00:03:28,120 --> 00:03:30,370
So now I have home page components.

43
00:03:30,370 --> 00:03:33,310
So here I have to pass in the component.

44
00:03:33,310 --> 00:03:36,490
So I need to require the component code home.

45
00:03:38,910 --> 00:03:39,270
Great.

46
00:03:39,270 --> 00:03:48,450
So here, I'll pass in here as a component and pass in and as that's so let's go over again we pass

47
00:03:48,450 --> 00:03:51,630
in the path meaning the you are I won't go.

48
00:03:52,020 --> 00:03:57,180
So this means that if I visit slash home I'm going to render this component.

49
00:03:57,180 --> 00:03:58,320
So let's save it.

50
00:03:58,320 --> 00:04:01,920
And now let's get back to the page and you can see that.

51
00:04:01,920 --> 00:04:02,610
I see.

52
00:04:02,610 --> 00:04:03,990
Welcome home.

53
00:04:04,260 --> 00:04:04,950
Great.

54
00:04:04,950 --> 00:04:11,910
So the next step is what I want to render the rest of the component that is the contact and then the

55
00:04:11,910 --> 00:04:12,900
about us.

56
00:04:12,990 --> 00:04:17,040
So the same step I would bring in the about component.

57
00:04:17,040 --> 00:04:21,480
So in case the auto import isn't working, let me show you one trick.

58
00:04:21,510 --> 00:04:28,890
Go back to a component or the file, receive it and now back to the file where we want to import it.

59
00:04:28,890 --> 00:04:33,900
So here would be about and now you can see that it's working now.

60
00:04:33,930 --> 00:04:42,990
So let me come here and next case I'll make use of the round and the same process I'll pass in the path

61
00:04:43,410 --> 00:04:51,600
for this I want to go to forward slash about and the component going to be equal to carry basis.

62
00:04:51,600 --> 00:04:58,290
And my component which is about great, now let's save it and now let me check it out.

63
00:04:58,470 --> 00:05:09,660
If I go to force slash about let's see a I see about as page how easy it is so you can post this video

64
00:05:09,660 --> 00:05:14,130
and then try the contact us and then the add main page.

65
00:05:15,940 --> 00:05:16,330
All right.

66
00:05:16,330 --> 00:05:18,370
So let me show you how I'm going to do that one.

67
00:05:18,370 --> 00:05:21,100
So here I want to render the contact.

68
00:05:21,100 --> 00:05:24,310
So back here, I'll make it of contact.

69
00:05:25,180 --> 00:05:26,710
And here we go.

70
00:05:26,710 --> 00:05:35,560
I can copy this one and now paste it here and change this one to contact and this one to contact component.

71
00:05:35,830 --> 00:05:43,360
So again, I want to copy this one and change this one to admin.

72
00:05:44,290 --> 00:05:49,090
And here is going to be the admin component for this one.

73
00:05:49,090 --> 00:05:50,770
The auto import is not working.

74
00:05:50,770 --> 00:05:56,800
So let me reset again and now back here and admin page and it's working fine.

75
00:05:56,950 --> 00:06:01,720
So let me try it from here and now I'll paste it here like that.

76
00:06:01,720 --> 00:06:05,050
So now we have complete navigation.

77
00:06:05,440 --> 00:06:09,250
So let me clear everything here and now let's check it out.

78
00:06:09,460 --> 00:06:14,950
If I go to admin now I have admin page.

79
00:06:15,310 --> 00:06:19,210
If I go to contact, I have contact page.

80
00:06:19,450 --> 00:06:27,250
If I go to log in, I can see that this page is not found unless we handle that.

81
00:06:27,250 --> 00:06:34,870
So in the next video, let's go ahead and then render a route that doesn't found and display a message

82
00:06:34,870 --> 00:06:37,900
called or for meaning not found.