1
00:00:01,300 --> 00:00:05,380
Let's take a look at a diagram and better understand how he can handle navigation inside of our app

2
00:00:05,410 --> 00:00:07,120
without doing that full page reload.

3
00:00:07,900 --> 00:00:11,470
OK, so this is a diagram of a couple of different components we've already created.

4
00:00:11,920 --> 00:00:17,140
So we've got our accordion search dropdown and translate, each of which are being displayed by a root

5
00:00:17,140 --> 00:00:17,710
component.

6
00:00:18,460 --> 00:00:20,440
We also have a header component as well.

7
00:00:21,070 --> 00:00:25,690
Now, inside the header component, we are going to make a new kind of component called a link.

8
00:00:26,240 --> 00:00:27,610
A link is just going to display.

9
00:00:27,640 --> 00:00:32,050
Well, a link on the screen that's going to show a normal anchor element.

10
00:00:32,530 --> 00:00:37,750
But we are going to attach an unclick handler to that anchor element that is going to execute some very

11
00:00:37,750 --> 00:00:40,150
special logic whenever a user clicks on it.

12
00:00:40,660 --> 00:00:45,130
So here's what's going to happen whenever a user clicks on one of these links in the future.

13
00:00:46,740 --> 00:00:51,120
Whenever a user clicks on one, those links, we're going to build a navigation event.

14
00:00:51,660 --> 00:00:56,580
This is going to be an object that is going to communicate to the rest of our application that the euro

15
00:00:56,640 --> 00:00:57,630
has just changed.

16
00:00:58,350 --> 00:01:03,780
This navigation event will then be sent off to all of the different root components inside of her app.

17
00:01:04,850 --> 00:01:09,860
When they receive this navigation event, they're going to know that the world has just changed.

18
00:01:10,400 --> 00:01:15,740
They'll then take a look at the updated your L and decide whether or not they should show their respective

19
00:01:15,800 --> 00:01:16,820
child components.

20
00:01:17,970 --> 00:01:19,110
That's the general idea.

21
00:01:19,380 --> 00:01:21,090
We're going to make a new component called Link.

22
00:01:21,540 --> 00:01:27,570
We're going to build up an anchor element inside of it and attach an on click mandola whenever user

23
00:01:27,570 --> 00:01:28,770
clicks on that anchor element.

24
00:01:29,010 --> 00:01:33,780
We're going to emit navigation object and we're then going to listen for that in all of our different

25
00:01:33,780 --> 00:01:34,260
routes.

26
00:01:35,330 --> 00:01:38,870
Now, there are definitely some specifics here that I'm leaving out, but don't worry, we'll get to

27
00:01:38,870 --> 00:01:39,710
them over time.

28
00:01:40,370 --> 00:01:44,290
Right now, let's just go back over to our editor and we're going to start to build up this link.

29
00:01:46,090 --> 00:01:48,800
OK, so back inside my editor, I'll find the components directory.

30
00:01:49,160 --> 00:01:52,100
I'm going to make a new file called Link Dot J.S..

31
00:01:53,080 --> 00:01:55,930
Inside of here, I'm going to import react from react.

32
00:01:57,150 --> 00:01:59,670
I'll then build a link component.

33
00:02:01,140 --> 00:02:02,670
And export it at the bottom.

34
00:02:05,490 --> 00:02:09,480
So inside of here, we definitely want to return some kind of anger element.

35
00:02:10,690 --> 00:02:14,680
Don going to return an anchor elements with just the text link right now.

36
00:02:16,520 --> 00:02:20,860
And then going to save this, I'm going to go backwards, my head or not just file.

37
00:02:21,430 --> 00:02:25,180
And I'm going to import the link component at the very top.

38
00:02:27,100 --> 00:02:32,090
So we want to show a link everywhere inside of our app instead of a normal anchor element.

39
00:02:32,780 --> 00:02:38,180
So instead of all of these normal anchor elements, we're going to show instances of this new link component.

40
00:02:38,900 --> 00:02:42,200
So I'm going to go through here and replace anchor with Link.

41
00:02:44,250 --> 00:02:45,130
There is another one.

42
00:02:47,730 --> 00:02:48,220
There is No.

43
00:02:48,220 --> 00:02:48,580
Three.

44
00:02:51,750 --> 00:02:52,560
And number four.

45
00:02:55,710 --> 00:03:01,830
So now whenever you display a link, we are still going to provide an ATF prop, a class name and some

46
00:03:01,830 --> 00:03:02,280
text.

47
00:03:02,820 --> 00:03:07,770
We should make sure first that the link component's receives those different props and applies them

48
00:03:07,770 --> 00:03:09,450
to the anchor element that's being displayed.

49
00:03:10,320 --> 00:03:14,070
Otherwise, if we show everything as is right now, well, I can show you what would happen.

50
00:03:14,370 --> 00:03:16,800
We're just going to see a link link link up here all over.

51
00:03:17,910 --> 00:03:22,510
So instead, we need to make sure that we take these props to the link component and pass them through

52
00:03:22,750 --> 00:03:24,880
to the anchor element that is being displayed inside there.

53
00:03:25,780 --> 00:03:27,820
So he could receive the props class name.

54
00:03:29,480 --> 00:03:31,490
Eight draft and children.

55
00:03:32,470 --> 00:03:34,010
So we could then apply the class name.

56
00:03:37,900 --> 00:03:38,590
The atrip.

57
00:03:39,310 --> 00:03:40,990
So we're just doing a direct pass through here.

58
00:03:41,230 --> 00:03:44,050
And then finally, the text inside would be this children prompt.

59
00:03:44,050 --> 00:03:48,070
So we'd put in children inside of curly braces inside the element itself.

60
00:03:49,490 --> 00:03:50,420
That we save this.

61
00:03:50,690 --> 00:03:55,670
We'll see exactly what we had before, but now we can very easily attach a clicky panhandler and some

62
00:03:55,730 --> 00:03:58,250
custom logic to the anchor element that is being created.

63
00:03:58,740 --> 00:04:02,540
So on that anchor element, I'm going to put in an on click.

64
00:04:03,720 --> 00:04:08,880
Whenever a user clicks on this anchor, we're going to run a helper function called on Click and I'll

65
00:04:08,880 --> 00:04:10,950
define that helper function right up here.

66
00:04:13,410 --> 00:04:18,130
OK, so remember, whenever we define an event handler, it's almost always going to receive any event

67
00:04:18,190 --> 00:04:18,700
object.

68
00:04:19,360 --> 00:04:23,680
The first thing we want to do whenever user clicks on an anchor element is make sure that we do not

69
00:04:23,680 --> 00:04:25,660
do a full page reload.

70
00:04:25,930 --> 00:04:26,950
That's the first thing we want to do.

71
00:04:27,520 --> 00:04:35,020
So to prevent a full page re reload inside this unclick handler, we will call event dot prevent default.

72
00:04:36,580 --> 00:04:40,970
That is going to prevent the normal behavior of the browser, which would cause a full page reload.

73
00:04:41,700 --> 00:04:44,540
Let's just say this as is and see what happens now.

74
00:04:45,660 --> 00:04:50,370
So now whenever I click on one these links, you'll notice that nothing happens at all.

75
00:04:51,180 --> 00:04:55,200
I'm clicking on the links, but definitely there's no additional requests.

76
00:04:55,440 --> 00:04:56,700
No content appears.

77
00:04:56,730 --> 00:04:58,860
No content changes or anything like that.

78
00:04:59,490 --> 00:05:01,230
So we've definitely succeeded in step one.

79
00:05:01,590 --> 00:05:06,300
We've now got a reusable link component that makes sure that we do not do a full page reload.

80
00:05:07,890 --> 00:05:09,300
So now the next thing we need to do.

81
00:05:11,420 --> 00:05:13,670
Is make sure that we somehow change the U r l.

82
00:05:14,240 --> 00:05:17,930
We have to change the URL without causing a full page refresh.

83
00:05:18,380 --> 00:05:20,660
Let's figure out how to change the URL in the next video.