In the last video we spoke about how we are not supposed to handle navigation inside of a reactor Rotterdam
application just to kind of drill this whole point home.
I'm going to flip back over to my app and I'm going to open up my chrome inspector and then select the
Network tab.
I'll then make sure I'm filtering by all requests.
Now notice how whenever I click on this anchor tag right here I make a request over to local host 3000
slash page too if I click on that request I can then click on response right here and I'll see that
I'm making an entire request to fetch the HTML document for my application after I get this it's HTML
document back.
I then make some follow up requests.
Inside my browser to get our javascript bundle that has all of our code with or re-act application inside
of it.
That entire process right there is duplicated.
When I then go back to page 1.
So every time I clicking on a link I make a request for an entirely new HTL document and that dumps
all the data I had loaded into my reaction redux application.
So let's now talk about how we're going to fix this and actually handle navigation inside of re-act
router application.
All right.
So back inside of my apt Jeff's file I'm going to find my import statement free act router Dom at the
top.
In addition to browser router and route I'm also going to poll in this link thing.
So this link thing right here is a Riak component that we're going to use in place of any anchor tags
we ever want to show inside of our application.
So I'm going to find my page one anchor tag right here and I'm going to replace it with a link tag instead.
Now when we put down a link tag we do not make use of the H ref prop.
Instead we call it 2.
So this is essentially a link that when clicked is going to take the user to the route slash page to
now will fix up the other incontact down here as well.
And all change the draft to two as well.
So now that we've got the correct way to handle navigation in here I'm going to remove the text that
says bad on both those components.
All right.
Let's now save this.
And now when I flip back over I'm going to clear my request log.
And then I will click on the links that are displayed on the screen and you'll notice that when I click
on these links.
I am not reloading the application at all.
I do not get any additional requests being made for any additional Estill document or anything like
that.
Now if you want to see something really interesting click the element Inspektor right here and then
inspect one of those ankar tax Well I said anchor tag I meant to say link tag but at the rates when
you click on that thing and inspect it you'll notice that what actually showed up on the screen from
the link component is an anchor tag anyways.
So when you use the link tag you're still showing an anchor component or an anchor tag on the screen.
So let's talk about exactly what that link tag is doing for us and how it's preventing the page from
being reloaded.
Even though we are using an anchor tag anyways OK.
Here we go.
So anytime that we want a user to be able to navigate around our application we're going to add in a
linked tag and it's going to list the route that the user is going to navigate to when they click on
it as the two prop.
Now here's the really important thing.
Whenever a user clicks on the anchor tag that internally gets rendered by that link because again it
does show an anchor tag when it shows up on screen re-act router is going to automatically prevent that
browser from navigating over to that new route in the traditional form.
So it's going to keep the browser from trying to navigate to that new route.
And prefetching an HMO document.
Now the euro is still going to change your bill still changes the history object that we discussed a
little bit ago is going to see the updated your l.
So it's going to take that Eurail and send it off to the browser router the browser routers then going
to communicate that you're down to all the different route components and the components are then going
to render to show a new set of components depending upon the path that the user is now visiting.
So the entire key here is this step right here.
When you make use of that link tag we're still making use of a anchor elements on the screen.
However re-act router is going to detect a click on an anchor tag and override the default behavior
and keep your browser from navigating away.
So when you make use of the link tag we are not dumping all of our react and Javascript data.
We are just showing a different set of components on the screen.
Just you note this entire idea of not making an additional request for a separate ational document when
we click on a link is where the term single page app or spa comes from single page out means that we
are only loading up a single HMO document.
We still allow the user to navigate around our application by clicking on various link tags.
But when they navigate around they still are making use of the same document.
We are just showing and hiding different sets of components based upon the URL.
That's how we handle navigation inside re-act writer application.
We are essentially tricking the user into thinking that they really are going to different pages.
But in fact we're just showing in hiding different components.
OK so now that we understand how navigation is done let's take another quick break and continue in the
next video.