Let's take a look at a diagram and better understand how he can handle navigation inside of our app
without doing that full page reload.
OK, so this is a diagram of a couple of different components we've already created.
So we've got our accordion search dropdown and translate, each of which are being displayed by a root
component.
We also have a header component as well.
Now, inside the header component, we are going to make a new kind of component called a link.
A link is just going to display.
Well, a link on the screen that's going to show a normal anchor element.
But we are going to attach an unclick handler to that anchor element that is going to execute some very
special logic whenever a user clicks on it.
So here's what's going to happen whenever a user clicks on one of these links in the future.
Whenever a user clicks on one, those links, we're going to build a navigation event.
This is going to be an object that is going to communicate to the rest of our application that the euro
has just changed.
This navigation event will then be sent off to all of the different root components inside of her app.
When they receive this navigation event, they're going to know that the world has just changed.
They'll then take a look at the updated your L and decide whether or not they should show their respective
child components.
That's the general idea.
We're going to make a new component called Link.
We're going to build up an anchor element inside of it and attach an on click mandola whenever user
clicks on that anchor element.
We're going to emit navigation object and we're then going to listen for that in all of our different
routes.
Now, there are definitely some specifics here that I'm leaving out, but don't worry, we'll get to
them over time.
Right now, let's just go back over to our editor and we're going to start to build up this link.
OK, so back inside my editor, I'll find the components directory.
I'm going to make a new file called Link Dot J.S..
Inside of here, I'm going to import react from react.
I'll then build a link component.
And export it at the bottom.
So inside of here, we definitely want to return some kind of anger element.
Don going to return an anchor elements with just the text link right now.
And then going to save this, I'm going to go backwards, my head or not just file.
And I'm going to import the link component at the very top.
So we want to show a link everywhere inside of our app instead of a normal anchor element.
So instead of all of these normal anchor elements, we're going to show instances of this new link component.
So I'm going to go through here and replace anchor with Link.
There is another one.
There is No.
Three.
And number four.
So now whenever you display a link, we are still going to provide an ATF prop, a class name and some
text.
We should make sure first that the link component's receives those different props and applies them
to the anchor element that's being displayed.
Otherwise, if we show everything as is right now, well, I can show you what would happen.
We're just going to see a link link link up here all over.
So instead, we need to make sure that we take these props to the link component and pass them through
to the anchor element that is being displayed inside there.
So he could receive the props class name.
Eight draft and children.
So we could then apply the class name.
The atrip.
So we're just doing a direct pass through here.
And then finally, the text inside would be this children prompt.
So we'd put in children inside of curly braces inside the element itself.
That we save this.
We'll see exactly what we had before, but now we can very easily attach a clicky panhandler and some
custom logic to the anchor element that is being created.
So on that anchor element, I'm going to put in an on click.
Whenever a user clicks on this anchor, we're going to run a helper function called on Click and I'll
define that helper function right up here.
OK, so remember, whenever we define an event handler, it's almost always going to receive any event
object.
The first thing we want to do whenever user clicks on an anchor element is make sure that we do not
do a full page reload.
That's the first thing we want to do.
So to prevent a full page re reload inside this unclick handler, we will call event dot prevent default.
That is going to prevent the normal behavior of the browser, which would cause a full page reload.
Let's just say this as is and see what happens now.
So now whenever I click on one these links, you'll notice that nothing happens at all.
I'm clicking on the links, but definitely there's no additional requests.
No content appears.
No content changes or anything like that.
So we've definitely succeeded in step one.
We've now got a reusable link component that makes sure that we do not do a full page reload.
So now the next thing we need to do.
Is make sure that we somehow change the U r l.
We have to change the URL without causing a full page refresh.
Let's figure out how to change the URL in the next video.