We now need to figure out how to change the rail without causing a full page refresh.
Let me first tell you why we are doing this at all.
Whenever a user navigates to some page, they generally have the expectation that they should be able
to bookmark that page and then come back to it in the future and see the same content up here on the
screen.
They also had the expectation that if they copy the link that they see right here, open it up in a
new tab is the link and hit enter.
They should see the exact same content.
You'll notice right now that did not happen for me.
I've got my translate component on the screen while I'm looking at the dropdown component.
If I open up a new tab and navigate directly to that same year, l I see the dropdown instead of the
translate stuff.
That's why as developers, we always try to make sure that the euro is kept in sync with the content
that is displayed on the screen.
It is because we expect our users to bookmark the page or tried to otherwise copy that link and access
it again in the future.
OK, so I'm going to very quickly make sure I see the correct content.
There we go.
As he dropdown.
So in order to change the URL, but not do a full page refresh.
We are going to use a function that is built directly into the browser.
Let me show you how to use it.
Right now, I met local host, three thousand slash dropdown.
I'm at my console and in the console I'm going to right out window dot history, dot push state then
is the first argument.
I'm going to provide an empty object as a second.
I'll provide an empty string and as a third I'll provide the route or the path name that I want to change
the URL to.
I put in translate right there, which means the URL should be updated to say slash translate.
But I should not otherwise see any other change to my application.
So I can run this.
And I see that I'm now at slash translate.
But no content changed on the screen.
And I did not make any additional requests or anything like that.
But this is pretty good right here.
We can change the URL.
We can keep it in sync with what content we are displaying, but we are not actually refreshing the
page or anything like that.
So let's add this line of code into our click event handler.
Right after the event, prevent default.
I'm going to add in a window dot history that push states all then provide an empty object, an empty
string.
And then the third argument we're going to provide the H ref that was passed to the link component.
We'll put in a trap like so.
Let's see this.
Look back over.
And now as we start to click on these different links, we can see that the URL is properly updating.
Awesome.
So there's accordion, there's list dropdown and translate.
OK, well, that looks pretty good.
Now we need to move on to the next step.
Anytime we do change that, you're l we need to make sure that all of our different root components
detect that change.
To do so, we can make sure that whenever user clicks on that link, we produce and emit a navigation
event of sorts.
This navigation event is going to be what tells a lot of our different routes that the world has just
changed.
So let's take you to that in just a moment.