We're not going to add in some more code to our link component.
Never user clicks on it.
We're going to emit a navigation event.
This navigation event is going to be sent over to all of our different root components.
So this is how we're going to tell our root components that the URL has just changed.
So back inside my editor, I'm still the link dodgiest file inside of here.
We're going to add in some code.
Right after we update that you are out, the code that we're going to write is going to look a little
bit mysterious.
Don't worry about the code too much.
All you need to understand is that the purpose of this code is to tell those dropdown components that
some data just changed or specifically that the euro you are l just changed.
So we're going to put inside of your Unst navvy event is new up state event and we're going to provide
a string of pop state.
We'll then call window dot dispatch event and provide that KNAB event.
So, again, what this does not superimportant.
All you need to understand is that this is going to communicate over to those root components that the
Earl has just changed.
Let's save this file, we're then going to go over to our root component and add some code inside there
to listen for this event.
So I going to go over to my rooftop JSF file.
We have to set up a root handler inside there to listen for that event, we just dispatch.
Meantime, we set up an event event listener inside of a component that's usually a sign that we need
to define a you state hook.
So I'm going to import.
You state at the top.
And then inside the component self.
I will call use effect.
Now, quick reminder on event handlers that we wire up manually inside of a component.
Usually we only want to run that event handler one time or wire it up, kind of start listening one
time.
So that is usually a sign that inside of use effect, we want to provide a second argument of an empty
array.
So we only run that function right there when this component is first rendered to the screen.
Then inside of here, we can start to wire up an event listener.
I'm going to call window, not add event listener.
We're going to listen for an event listener of four for an event of pop state.
And anytime that occurs, I want to run a function that we're going to call on location change.
I'm not going to define that function right above.
Right now, inside, they're going to do a simple console log of location change.
I might be curious why my defining this callback function as a separate variable?
Well, again, remember, if we ever decide to stop showing you the root component on the screen, we
would want to make sure that we clean up this event.
Listener.
So I want to make sure that from this use effect function, I return a cleanup function and inside there
we will remove that event.
Listener.
So window dot remove event listener upstate's.
And on location change.
That is why we defined the callback as a separate function just so we could very easily remove it a
little bit later on.
OK.
Let's save this and then go back over to our browser and test it out.
We got to import these affect.
I accidentally imported you state.
Let me update that really quickly.
That's better.
OK, so now whenever we click on a link.
We should see that consoles disappear inside of our console every single time I click on a link.
I get four separate console logs because we have four copies of the root component right now in each
of them is listening for that navigation event.
So this means that we can update the URL and detect that has been updated inside of a root component
as well.
The very last thing we really have to do now, we need to make sure that any time that Eurail does get
change the right component updates some piece of state which will cause the root component to re render.
And that would be our opportunity to decide whether or not we want to now hide or show the component
that the root is displaying.
Let's take her that last step in just a moment.