1
00:00:00,020 --> 00:00:00,350
Okay.

2
00:00:00,380 --> 00:00:07,190
And up next, let's see how we can use link component to navigate around our project because using URL

3
00:00:07,220 --> 00:00:15,580
bar is cool to type basically the URL each and every time, but it's probably not the best user experience.

4
00:00:15,590 --> 00:00:21,620
And effectively I'm just going to set up two links, one in register which is going to go to login one

5
00:00:21,620 --> 00:00:27,430
and then in login one back to register, of course you can pick any pages.

6
00:00:27,450 --> 00:00:30,860
It doesn't really matter, but this is going to be my approach.

7
00:00:30,860 --> 00:00:37,780
So first I'm going to go to register and since it's going to be a component, I need to set up a parent.

8
00:00:37,790 --> 00:00:39,350
So I'm going to go here with Div.

9
00:00:39,350 --> 00:00:43,550
I'm going to place the heading one inside of the div.

10
00:00:43,550 --> 00:00:48,740
I'll set up the return and again I'm going to rely on the auto import.

11
00:00:48,740 --> 00:00:52,280
So we're looking for link component from React router Dom.

12
00:00:52,310 --> 00:00:54,230
It has a two prop.

13
00:00:54,230 --> 00:00:55,790
So where do we want to go?

14
00:00:55,790 --> 00:01:04,940
And again we go forward slash and then the page name and of course you need to point to the existing

15
00:01:04,940 --> 00:01:06,110
page in your project.

16
00:01:06,110 --> 00:01:07,550
So at the moment what do we have?

17
00:01:07,550 --> 00:01:11,180
We have home page register, login and dashboard.

18
00:01:11,180 --> 00:01:13,160
So pick any of these pages.

19
00:01:13,160 --> 00:01:16,910
In my case, like I keep saying, it's going to be a login.

20
00:01:16,940 --> 00:01:23,600
Then inside of the component we just type what we want to display as far as text in the link.

21
00:01:23,600 --> 00:01:30,380
So let's write here login page, let's save, let's use the URL bar again.

22
00:01:31,020 --> 00:01:32,660
To navigate to a register.

23
00:01:32,670 --> 00:01:34,530
Notice now I have this link.

24
00:01:34,560 --> 00:01:38,460
The login page and I also have here the semicolon.

25
00:01:38,460 --> 00:01:39,460
I don't need that.

26
00:01:39,480 --> 00:01:45,340
And now we want to quickly jump to a login one and pretty much repeat all of the steps.

27
00:01:45,360 --> 00:01:47,520
So first let me take the link.

28
00:01:47,640 --> 00:01:49,410
I think it's going to be faster.

29
00:01:50,070 --> 00:01:50,810
Over here.

30
00:01:50,840 --> 00:01:51,620
Copy and paste.

31
00:01:51,620 --> 00:01:52,640
And then.

32
00:01:53,680 --> 00:01:55,540
I also want to take this structure.

33
00:01:55,870 --> 00:01:57,430
What is going to be the difference?

34
00:01:57,430 --> 00:02:01,330
Well, of course, it's going to be a login page now.

35
00:02:02,160 --> 00:02:04,270
And where are we going to go?

36
00:02:04,290 --> 00:02:05,580
Well, register.

37
00:02:05,580 --> 00:02:06,170
Correct.

38
00:02:06,180 --> 00:02:08,039
So register page here.

39
00:02:09,009 --> 00:02:10,660
And register page.

40
00:02:11,350 --> 00:02:12,520
As far as the text.

41
00:02:12,520 --> 00:02:14,500
And once we save, check it out.

42
00:02:14,500 --> 00:02:15,220
I click.

43
00:02:15,990 --> 00:02:21,090
We instantly go to a login page and then we go back to the register page.

44
00:02:21,880 --> 00:02:25,210
And effectively this is how single page applications work.

45
00:02:25,240 --> 00:02:29,590
So notice we're not doing the full page reload over here.

46
00:02:29,770 --> 00:02:37,120
The moment we click, we right away instantly navigate to that page because all of the routing is happening

47
00:02:37,120 --> 00:02:38,770
on a client side.

48
00:02:38,830 --> 00:02:41,050
And that's why it's super, super fast.

49
00:02:41,080 --> 00:02:47,590
Now, if you inspect the elements, you'll see that at the end of the day you still get the link, right?

50
00:02:47,620 --> 00:02:50,980
Notice under the heading one, it's still a link.

51
00:02:51,390 --> 00:02:56,670
But because we're using the link component, we get all of those superpowers.

52
00:02:56,850 --> 00:02:59,880
Now, please keep in mind one very, very important thing.

53
00:02:59,910 --> 00:03:05,790
The link component only works for the pages in our project.

54
00:03:05,880 --> 00:03:12,750
So, for example, if you want to navigate somewhere externally and yes, I will use my site.

55
00:03:12,780 --> 00:03:13,760
Don't judge me.

56
00:03:13,770 --> 00:03:17,670
So for example, if you want to navigate to John smith.com.

57
00:03:18,590 --> 00:03:22,310
You'll still have to use the traditional link element.

58
00:03:22,310 --> 00:03:24,920
So let me grab the URL.

59
00:03:25,250 --> 00:03:29,720
And let's say best web dev courses.

60
00:03:30,020 --> 00:03:31,130
Let's save.

61
00:03:31,160 --> 00:03:40,220
We still need to use the traditional link if we want to go somewhere externally basically to some kind

62
00:03:40,220 --> 00:03:42,010
of external resource.

63
00:03:42,020 --> 00:03:48,020
But when it comes to the pages inside of our project, of course we can nicely use the link component.