In this video.
Let's see how we can implement what is navigation.
Meaning that when I click on a link I won't go to a certain path or a component.
So let's see.
And this is what we are going to achieve something like this.
When I click on home, I want to see that when I click on product, I want to see that when I click
on admin, I want to see that.
So after we finish that, then we are going to modify our application to have something like this.
So let's get going.
All right.
So how are we going to do that?
Definitely this is a component.
So we are going to create a component for this.
So inside the components, let's create one file and call this one as number dot JS.
So let's cut for the components and here we go.
For this one, we are going to use the knife tag now and here we go.
And I want to use the L tag that is u l and inside here let's add the l i and inside that we are going
to use the a tag.
So I'll show you what we are going to do.
So here I'll call this one at home and for a tag let's pass in an attribute called h ref meaning the
path and going to be home.
So let's copy this one three times and now let's see.
Great.
So let's change this one to product and then next one is going to be admin and then next one is going
to be log in and then this one is going to be as contact and we have one and that one is think is about
us, don't worry about the order.
So here is going to be a forest slash product.
There is no component for that.
But we will get there soon and here are going to be as admin and let's see, admin and log in is going
to be looking and then contacts is going to be contact and about is going to be about make sure that
this route exists inside the app.
So if there is no path that matches what we have specified, we are going to see full form.
So now I have this component, how are we going to render that?
So I'll bring in enough by here.
So where are you going to place it?
So if you place it inside, something like this one, unless we visit an endpoint or Iraq before it
matches, but we have what is called universal component, meaning that if I put the component inside
the root, irrespective of where I go, I will still see that component without using a path.
So to achieve that, we are going to place it before our root.
So here is going to be our knife path.
So this one means that this number will be available on any of these components.
So let's save it and now let's check it out.
And you can see that these are the numbers.
And when I click on that, everything works fine.
But we have a problem when we are using the a link or a tag.
Have a look.
Put your eyes here.
So when I click on any link, you can see that something happens that is refreshing our entire application.
But React doesn't work in that way.
React only refresh, only a component that renders, but not the entire application.
That is why React is really awesome, meaning it's increased speed of application.
So to avoid that, we are not going to use the attack, but instead we are going to use a component
from React Router Dom core link.
So let's require the link from React router dom, from React router dom and I'll pass in here the link
and now we are going to replace this one using link.
So to select multiple elements, select one and then on a keyboard press command D if your windows thing
is control.
D And then press, press.
Press, press, press.
Press, press, press and press can see that is selecting all the elements on my page.
I think you're going to have some problem, but don't worry.
So let's change this one to link like that.
Great.
So here this has changed.
Let's change this one to admin here.
Yeah.
And this one to let's remove this one.
It's going to be as contacts and here is going to be about now I have replaced the attack with a link
component when I save it now something where has happened, nothing seems to display it.
I think we are doing something wrong.
Okay, I remember so inside the link we are not going to use the ref but instead we are going to use
different protocol to so here select all and now let's change to two.
Now let's save it.
And now you can see that it back when I click on login.
Now put your eyes here like I.
See that?
Nothing refresh.
That's how the link works.
And this is what we want.
And again, I think we have messed up with the links.
So here, let me change this one to admin.
Great.
And this one to contact.
Great.
And this one to about.
All right, so let's save it.
And now we have it.
Great.
So now this is how we implement navigation.
All right, so the next video, let's implement what is called the authentication.
How are you going to protect a certain component for unauthorized user?