1
00:00:00,740 --> 00:00:05,000
In the last video we spoke about how we are not supposed to handle navigation inside of a reactor Rotterdam

2
00:00:05,150 --> 00:00:08,450
application just to kind of drill this whole point home.

3
00:00:08,480 --> 00:00:12,440
I'm going to flip back over to my app and I'm going to open up my chrome inspector and then select the

4
00:00:12,500 --> 00:00:14,050
Network tab.

5
00:00:14,220 --> 00:00:16,730
I'll then make sure I'm filtering by all requests.

6
00:00:16,730 --> 00:00:23,300
Now notice how whenever I click on this anchor tag right here I make a request over to local host 3000

7
00:00:23,330 --> 00:00:28,520
slash page too if I click on that request I can then click on response right here and I'll see that

8
00:00:28,550 --> 00:00:35,120
I'm making an entire request to fetch the HTML document for my application after I get this it's HTML

9
00:00:35,180 --> 00:00:36,220
document back.

10
00:00:36,230 --> 00:00:37,810
I then make some follow up requests.

11
00:00:37,820 --> 00:00:43,130
Inside my browser to get our javascript bundle that has all of our code with or re-act application inside

12
00:00:43,130 --> 00:00:43,860
of it.

13
00:00:44,000 --> 00:00:46,210
That entire process right there is duplicated.

14
00:00:46,210 --> 00:00:48,250
When I then go back to page 1.

15
00:00:48,380 --> 00:00:53,990
So every time I clicking on a link I make a request for an entirely new HTL document and that dumps

16
00:00:54,050 --> 00:00:57,710
all the data I had loaded into my reaction redux application.

17
00:00:57,740 --> 00:01:02,360
So let's now talk about how we're going to fix this and actually handle navigation inside of re-act

18
00:01:03,110 --> 00:01:04,740
router application.

19
00:01:05,030 --> 00:01:05,240
All right.

20
00:01:05,240 --> 00:01:09,500
So back inside of my apt Jeff's file I'm going to find my import statement free act router Dom at the

21
00:01:09,500 --> 00:01:10,850
top.

22
00:01:10,850 --> 00:01:15,920
In addition to browser router and route I'm also going to poll in this link thing.

23
00:01:16,220 --> 00:01:21,590
So this link thing right here is a Riak component that we're going to use in place of any anchor tags

24
00:01:21,650 --> 00:01:23,720
we ever want to show inside of our application.

25
00:01:24,080 --> 00:01:30,550
So I'm going to find my page one anchor tag right here and I'm going to replace it with a link tag instead.

26
00:01:31,260 --> 00:01:35,150
Now when we put down a link tag we do not make use of the H ref prop.

27
00:01:35,200 --> 00:01:37,140
Instead we call it 2.

28
00:01:37,350 --> 00:01:42,900
So this is essentially a link that when clicked is going to take the user to the route slash page to

29
00:01:43,960 --> 00:01:46,530
now will fix up the other incontact down here as well.

30
00:01:48,940 --> 00:01:52,020
And all change the draft to two as well.

31
00:01:52,060 --> 00:01:55,930
So now that we've got the correct way to handle navigation in here I'm going to remove the text that

32
00:01:55,930 --> 00:01:59,260
says bad on both those components.

33
00:01:59,290 --> 00:01:59,570
All right.

34
00:01:59,600 --> 00:02:00,980
Let's now save this.

35
00:02:01,030 --> 00:02:04,600
And now when I flip back over I'm going to clear my request log.

36
00:02:04,900 --> 00:02:08,500
And then I will click on the links that are displayed on the screen and you'll notice that when I click

37
00:02:08,500 --> 00:02:09,180
on these links.

38
00:02:09,280 --> 00:02:11,850
I am not reloading the application at all.

39
00:02:11,860 --> 00:02:16,330
I do not get any additional requests being made for any additional Estill document or anything like

40
00:02:16,330 --> 00:02:17,230
that.

41
00:02:17,230 --> 00:02:22,780
Now if you want to see something really interesting click the element Inspektor right here and then

42
00:02:22,780 --> 00:02:30,700
inspect one of those ankar tax Well I said anchor tag I meant to say link tag but at the rates when

43
00:02:30,700 --> 00:02:35,140
you click on that thing and inspect it you'll notice that what actually showed up on the screen from

44
00:02:35,140 --> 00:02:38,250
the link component is an anchor tag anyways.

45
00:02:38,500 --> 00:02:44,740
So when you use the link tag you're still showing an anchor component or an anchor tag on the screen.

46
00:02:44,740 --> 00:02:49,060
So let's talk about exactly what that link tag is doing for us and how it's preventing the page from

47
00:02:49,060 --> 00:02:49,880
being reloaded.

48
00:02:49,930 --> 00:02:54,610
Even though we are using an anchor tag anyways OK.

49
00:02:54,640 --> 00:02:55,820
Here we go.

50
00:02:55,840 --> 00:03:00,760
So anytime that we want a user to be able to navigate around our application we're going to add in a

51
00:03:00,760 --> 00:03:05,650
linked tag and it's going to list the route that the user is going to navigate to when they click on

52
00:03:05,650 --> 00:03:08,070
it as the two prop.

53
00:03:08,080 --> 00:03:09,340
Now here's the really important thing.

54
00:03:09,370 --> 00:03:14,800
Whenever a user clicks on the anchor tag that internally gets rendered by that link because again it

55
00:03:14,800 --> 00:03:20,350
does show an anchor tag when it shows up on screen re-act router is going to automatically prevent that

56
00:03:20,350 --> 00:03:25,260
browser from navigating over to that new route in the traditional form.

57
00:03:25,270 --> 00:03:28,600
So it's going to keep the browser from trying to navigate to that new route.

58
00:03:28,600 --> 00:03:32,780
And prefetching an HMO document.

59
00:03:33,020 --> 00:03:38,720
Now the euro is still going to change your bill still changes the history object that we discussed a

60
00:03:38,720 --> 00:03:41,610
little bit ago is going to see the updated your l.

61
00:03:41,660 --> 00:03:46,100
So it's going to take that Eurail and send it off to the browser router the browser routers then going

62
00:03:46,100 --> 00:03:50,720
to communicate that you're down to all the different route components and the components are then going

63
00:03:50,720 --> 00:03:57,050
to render to show a new set of components depending upon the path that the user is now visiting.

64
00:03:57,050 --> 00:04:00,210
So the entire key here is this step right here.

65
00:04:00,470 --> 00:04:05,130
When you make use of that link tag we're still making use of a anchor elements on the screen.

66
00:04:05,300 --> 00:04:11,210
However re-act router is going to detect a click on an anchor tag and override the default behavior

67
00:04:11,360 --> 00:04:13,660
and keep your browser from navigating away.

68
00:04:13,670 --> 00:04:18,440
So when you make use of the link tag we are not dumping all of our react and Javascript data.

69
00:04:18,440 --> 00:04:21,970
We are just showing a different set of components on the screen.

70
00:04:22,190 --> 00:04:27,800
Just you note this entire idea of not making an additional request for a separate ational document when

71
00:04:27,800 --> 00:04:34,330
we click on a link is where the term single page app or spa comes from single page out means that we

72
00:04:34,330 --> 00:04:37,100
are only loading up a single HMO document.

73
00:04:37,130 --> 00:04:42,020
We still allow the user to navigate around our application by clicking on various link tags.

74
00:04:42,110 --> 00:04:46,360
But when they navigate around they still are making use of the same document.

75
00:04:46,430 --> 00:04:51,040
We are just showing and hiding different sets of components based upon the URL.

76
00:04:51,080 --> 00:04:55,400
That's how we handle navigation inside re-act writer application.

77
00:04:55,430 --> 00:04:59,750
We are essentially tricking the user into thinking that they really are going to different pages.

78
00:04:59,750 --> 00:05:03,180
But in fact we're just showing in hiding different components.

79
00:05:03,580 --> 00:05:07,850
OK so now that we understand how navigation is done let's take another quick break and continue in the

80
00:05:07,850 --> 00:05:08,630
next video.