Okay.
And up next, let's see how we can use link component to navigate around our project because using URL
bar is cool to type basically the URL each and every time, but it's probably not the best user experience.
And effectively I'm just going to set up two links, one in register which is going to go to login one
and then in login one back to register, of course you can pick any pages.
It doesn't really matter, but this is going to be my approach.
So first I'm going to go to register and since it's going to be a component, I need to set up a parent.
So I'm going to go here with Div.
I'm going to place the heading one inside of the div.
I'll set up the return and again I'm going to rely on the auto import.
So we're looking for link component from React router Dom.
It has a two prop.
So where do we want to go?
And again we go forward slash and then the page name and of course you need to point to the existing
page in your project.
So at the moment what do we have?
We have home page register, login and dashboard.
So pick any of these pages.
In my case, like I keep saying, it's going to be a login.
Then inside of the component we just type what we want to display as far as text in the link.
So let's write here login page, let's save, let's use the URL bar again.
To navigate to a register.
Notice now I have this link.
The login page and I also have here the semicolon.
I don't need that.
And now we want to quickly jump to a login one and pretty much repeat all of the steps.
So first let me take the link.
I think it's going to be faster.
Over here.
Copy and paste.
And then.
I also want to take this structure.
What is going to be the difference?
Well, of course, it's going to be a login page now.
And where are we going to go?
Well, register.
Correct.
So register page here.
And register page.
As far as the text.
And once we save, check it out.
I click.
We instantly go to a login page and then we go back to the register page.
And effectively this is how single page applications work.
So notice we're not doing the full page reload over here.
The moment we click, we right away instantly navigate to that page because all of the routing is happening
on a client side.
And that's why it's super, super fast.
Now, if you inspect the elements, you'll see that at the end of the day you still get the link, right?
Notice under the heading one, it's still a link.
But because we're using the link component, we get all of those superpowers.
Now, please keep in mind one very, very important thing.
The link component only works for the pages in our project.
So, for example, if you want to navigate somewhere externally and yes, I will use my site.
Don't judge me.
So for example, if you want to navigate to John smith.com.
You'll still have to use the traditional link element.
So let me grab the URL.
And let's say best web dev courses.
Let's save.
We still need to use the traditional link if we want to go somewhere externally basically to some kind
of external resource.
But when it comes to the pages inside of our project, of course we can nicely use the link component.