1
00:00:08,240 --> 00:00:09,260
In this video.

2
00:00:09,260 --> 00:00:13,160
Let's see how we can implement what is navigation.

3
00:00:13,160 --> 00:00:19,670
Meaning that when I click on a link I won't go to a certain path or a component.

4
00:00:19,670 --> 00:00:21,070
So let's see.

5
00:00:21,080 --> 00:00:25,520
And this is what we are going to achieve something like this.

6
00:00:25,520 --> 00:00:30,290
When I click on home, I want to see that when I click on product, I want to see that when I click

7
00:00:30,290 --> 00:00:32,299
on admin, I want to see that.

8
00:00:32,450 --> 00:00:39,260
So after we finish that, then we are going to modify our application to have something like this.

9
00:00:39,260 --> 00:00:41,090
So let's get going.

10
00:00:41,240 --> 00:00:41,900
All right.

11
00:00:41,900 --> 00:00:43,820
So how are we going to do that?

12
00:00:43,850 --> 00:00:46,130
Definitely this is a component.

13
00:00:46,130 --> 00:00:49,280
So we are going to create a component for this.

14
00:00:49,280 --> 00:00:59,360
So inside the components, let's create one file and call this one as number dot JS.

15
00:01:00,270 --> 00:01:04,500
So let's cut for the components and here we go.

16
00:01:04,739 --> 00:01:12,090
For this one, we are going to use the knife tag now and here we go.

17
00:01:12,090 --> 00:01:22,140
And I want to use the L tag that is u l and inside here let's add the l i and inside that we are going

18
00:01:22,140 --> 00:01:23,340
to use the a tag.

19
00:01:23,340 --> 00:01:26,100
So I'll show you what we are going to do.

20
00:01:26,130 --> 00:01:33,570
So here I'll call this one at home and for a tag let's pass in an attribute called h ref meaning the

21
00:01:33,570 --> 00:01:35,670
path and going to be home.

22
00:01:35,670 --> 00:01:40,350
So let's copy this one three times and now let's see.

23
00:01:40,770 --> 00:01:40,970
Great.

24
00:01:41,070 --> 00:01:51,840
So let's change this one to product and then next one is going to be admin and then next one is going

25
00:01:51,840 --> 00:02:03,390
to be log in and then this one is going to be as contact and we have one and that one is think is about

26
00:02:03,390 --> 00:02:05,790
us, don't worry about the order.

27
00:02:06,390 --> 00:02:09,389
So here is going to be a forest slash product.

28
00:02:09,419 --> 00:02:11,520
There is no component for that.

29
00:02:11,520 --> 00:02:21,420
But we will get there soon and here are going to be as admin and let's see, admin and log in is going

30
00:02:21,420 --> 00:02:30,990
to be looking and then contacts is going to be contact and about is going to be about make sure that

31
00:02:30,990 --> 00:02:34,890
this route exists inside the app.

32
00:02:34,890 --> 00:02:42,120
So if there is no path that matches what we have specified, we are going to see full form.

33
00:02:42,120 --> 00:02:46,560
So now I have this component, how are we going to render that?

34
00:02:46,560 --> 00:02:49,080
So I'll bring in enough by here.

35
00:02:49,290 --> 00:02:51,300
So where are you going to place it?

36
00:02:51,300 --> 00:02:59,100
So if you place it inside, something like this one, unless we visit an endpoint or Iraq before it

37
00:02:59,100 --> 00:03:06,840
matches, but we have what is called universal component, meaning that if I put the component inside

38
00:03:06,840 --> 00:03:13,350
the root, irrespective of where I go, I will still see that component without using a path.

39
00:03:13,680 --> 00:03:18,030
So to achieve that, we are going to place it before our root.

40
00:03:18,030 --> 00:03:21,060
So here is going to be our knife path.

41
00:03:21,300 --> 00:03:27,030
So this one means that this number will be available on any of these components.

42
00:03:27,030 --> 00:03:30,420
So let's save it and now let's check it out.

43
00:03:30,420 --> 00:03:33,510
And you can see that these are the numbers.

44
00:03:33,510 --> 00:03:36,630
And when I click on that, everything works fine.

45
00:03:36,750 --> 00:03:42,240
But we have a problem when we are using the a link or a tag.

46
00:03:42,270 --> 00:03:43,020
Have a look.

47
00:03:43,050 --> 00:03:44,550
Put your eyes here.

48
00:03:44,970 --> 00:03:52,860
So when I click on any link, you can see that something happens that is refreshing our entire application.

49
00:03:53,310 --> 00:03:56,430
But React doesn't work in that way.

50
00:03:56,520 --> 00:04:04,080
React only refresh, only a component that renders, but not the entire application.

51
00:04:04,200 --> 00:04:10,770
That is why React is really awesome, meaning it's increased speed of application.

52
00:04:11,040 --> 00:04:19,829
So to avoid that, we are not going to use the attack, but instead we are going to use a component

53
00:04:19,829 --> 00:04:23,580
from React Router Dom core link.

54
00:04:23,580 --> 00:04:33,930
So let's require the link from React router dom, from React router dom and I'll pass in here the link

55
00:04:33,930 --> 00:04:39,030
and now we are going to replace this one using link.

56
00:04:39,210 --> 00:04:48,090
So to select multiple elements, select one and then on a keyboard press command D if your windows thing

57
00:04:48,090 --> 00:04:48,780
is control.

58
00:04:48,780 --> 00:04:51,070
D And then press, press.

59
00:04:51,090 --> 00:04:52,200
Press, press, press.

60
00:04:52,200 --> 00:04:53,190
Press, press, press.

61
00:04:53,190 --> 00:05:00,900
Press, press, press and press can see that is selecting all the elements on my page.

62
00:05:01,170 --> 00:05:03,600
I think you're going to have some problem, but don't worry.

63
00:05:03,630 --> 00:05:07,560
So let's change this one to link like that.

64
00:05:07,560 --> 00:05:08,190
Great.

65
00:05:08,190 --> 00:05:10,650
So here this has changed.

66
00:05:10,650 --> 00:05:13,050
Let's change this one to admin here.

67
00:05:13,050 --> 00:05:13,770
Yeah.

68
00:05:13,770 --> 00:05:14,400
Yeah.

69
00:05:14,670 --> 00:05:17,640
And this one to let's remove this one.

70
00:05:17,640 --> 00:05:28,440
It's going to be as contacts and here is going to be about now I have replaced the attack with a link

71
00:05:28,440 --> 00:05:35,150
component when I save it now something where has happened, nothing seems to display it.

72
00:05:35,160 --> 00:05:37,350
I think we are doing something wrong.

73
00:05:37,650 --> 00:05:45,030
Okay, I remember so inside the link we are not going to use the ref but instead we are going to use

74
00:05:45,030 --> 00:05:51,000
different protocol to so here select all and now let's change to two.

75
00:05:51,840 --> 00:05:53,310
Now let's save it.

76
00:05:53,310 --> 00:05:57,300
And now you can see that it back when I click on login.

77
00:05:57,300 --> 00:05:59,580
Now put your eyes here like I.

78
00:05:59,700 --> 00:06:00,240
See that?

79
00:06:00,240 --> 00:06:01,990
Nothing refresh.

80
00:06:02,010 --> 00:06:04,050
That's how the link works.

81
00:06:04,050 --> 00:06:05,640
And this is what we want.

82
00:06:05,850 --> 00:06:08,870
And again, I think we have messed up with the links.

83
00:06:08,880 --> 00:06:13,140
So here, let me change this one to admin.

84
00:06:14,010 --> 00:06:14,700
Great.

85
00:06:14,850 --> 00:06:17,520
And this one to contact.

86
00:06:18,840 --> 00:06:19,560
Great.

87
00:06:19,830 --> 00:06:22,560
And this one to about.

88
00:06:23,280 --> 00:06:24,480
All right, so let's save it.

89
00:06:24,480 --> 00:06:25,830
And now we have it.

90
00:06:25,860 --> 00:06:26,410
Great.

91
00:06:26,430 --> 00:06:29,640
So now this is how we implement navigation.

92
00:06:30,030 --> 00:06:37,300
All right, so the next video, let's implement what is called the authentication.

93
00:06:37,320 --> 00:06:44,070
How are you going to protect a certain component for unauthorized user?