1
00:00:01,580 --> 00:00:05,480
We now need to figure out how to change the rail without causing a full page refresh.

2
00:00:06,640 --> 00:00:08,710
Let me first tell you why we are doing this at all.

3
00:00:09,340 --> 00:00:13,780
Whenever a user navigates to some page, they generally have the expectation that they should be able

4
00:00:13,780 --> 00:00:18,370
to bookmark that page and then come back to it in the future and see the same content up here on the

5
00:00:18,370 --> 00:00:18,760
screen.

6
00:00:19,540 --> 00:00:24,670
They also had the expectation that if they copy the link that they see right here, open it up in a

7
00:00:24,670 --> 00:00:27,160
new tab is the link and hit enter.

8
00:00:27,400 --> 00:00:29,230
They should see the exact same content.

9
00:00:29,890 --> 00:00:31,990
You'll notice right now that did not happen for me.

10
00:00:32,890 --> 00:00:37,360
I've got my translate component on the screen while I'm looking at the dropdown component.

11
00:00:38,080 --> 00:00:43,240
If I open up a new tab and navigate directly to that same year, l I see the dropdown instead of the

12
00:00:43,240 --> 00:00:43,990
translate stuff.

13
00:00:44,650 --> 00:00:49,660
That's why as developers, we always try to make sure that the euro is kept in sync with the content

14
00:00:49,690 --> 00:00:50,950
that is displayed on the screen.

15
00:00:51,220 --> 00:00:56,320
It is because we expect our users to bookmark the page or tried to otherwise copy that link and access

16
00:00:56,320 --> 00:00:57,490
it again in the future.

17
00:00:59,340 --> 00:01:02,100
OK, so I'm going to very quickly make sure I see the correct content.

18
00:01:02,160 --> 00:01:02,550
There we go.

19
00:01:02,640 --> 00:01:03,360
As he dropdown.

20
00:01:04,450 --> 00:01:08,260
So in order to change the URL, but not do a full page refresh.

21
00:01:08,340 --> 00:01:11,380
We are going to use a function that is built directly into the browser.

22
00:01:11,680 --> 00:01:12,940
Let me show you how to use it.

23
00:01:14,130 --> 00:01:16,490
Right now, I met local host, three thousand slash dropdown.

24
00:01:17,220 --> 00:01:24,720
I'm at my console and in the console I'm going to right out window dot history, dot push state then

25
00:01:24,750 --> 00:01:25,530
is the first argument.

26
00:01:25,530 --> 00:01:28,070
I'm going to provide an empty object as a second.

27
00:01:28,140 --> 00:01:33,690
I'll provide an empty string and as a third I'll provide the route or the path name that I want to change

28
00:01:33,720 --> 00:01:34,470
the URL to.

29
00:01:35,360 --> 00:01:39,930
I put in translate right there, which means the URL should be updated to say slash translate.

30
00:01:40,290 --> 00:01:43,590
But I should not otherwise see any other change to my application.

31
00:01:44,670 --> 00:01:45,440
So I can run this.

32
00:01:46,360 --> 00:01:48,650
And I see that I'm now at slash translate.

33
00:01:49,230 --> 00:01:50,850
But no content changed on the screen.

34
00:01:51,100 --> 00:01:54,180
And I did not make any additional requests or anything like that.

35
00:01:55,430 --> 00:01:56,690
But this is pretty good right here.

36
00:01:56,750 --> 00:01:57,730
We can change the URL.

37
00:01:57,890 --> 00:02:02,630
We can keep it in sync with what content we are displaying, but we are not actually refreshing the

38
00:02:02,630 --> 00:02:04,340
page or anything like that.

39
00:02:05,210 --> 00:02:08,030
So let's add this line of code into our click event handler.

40
00:02:09,820 --> 00:02:11,580
Right after the event, prevent default.

41
00:02:11,880 --> 00:02:19,480
I'm going to add in a window dot history that push states all then provide an empty object, an empty

42
00:02:19,480 --> 00:02:19,930
string.

43
00:02:20,930 --> 00:02:26,100
And then the third argument we're going to provide the H ref that was passed to the link component.

44
00:02:26,370 --> 00:02:28,560
We'll put in a trap like so.

45
00:02:30,750 --> 00:02:31,500
Let's see this.

46
00:02:31,620 --> 00:02:32,310
Look back over.

47
00:02:33,370 --> 00:02:37,930
And now as we start to click on these different links, we can see that the URL is properly updating.

48
00:02:38,800 --> 00:02:39,160
Awesome.

49
00:02:39,940 --> 00:02:43,450
So there's accordion, there's list dropdown and translate.

50
00:02:44,480 --> 00:02:45,590
OK, well, that looks pretty good.

51
00:02:46,280 --> 00:02:47,750
Now we need to move on to the next step.

52
00:02:48,320 --> 00:02:52,250
Anytime we do change that, you're l we need to make sure that all of our different root components

53
00:02:52,280 --> 00:02:53,450
detect that change.

54
00:02:54,260 --> 00:03:00,230
To do so, we can make sure that whenever user clicks on that link, we produce and emit a navigation

55
00:03:00,260 --> 00:03:01,310
event of sorts.

56
00:03:01,910 --> 00:03:07,100
This navigation event is going to be what tells a lot of our different routes that the world has just

57
00:03:07,100 --> 00:03:07,610
changed.

58
00:03:08,360 --> 00:03:10,220
So let's take you to that in just a moment.