In this video we're going to start to talk about how we handle navigation between different routes.
Inside they react rodder application.
So at present the only way that a user can navigate between the two routes that we have to find is by
changing the address inside the address bar.
So for example if I want to go back to my route route I would have to delete page 2 and then hit enter
and then I can see Page 1 appear on the screen.
So let's figure out how we can somehow more easily navigate between different routes inside of our application.
Now if this was a traditional application using just straight female pages doing this navigation be
very easy and very straightforward we could do something inside of our two separate components.
So inside of PAGE ONE right here I might add in an anchor tag that said like navigate to page 2.
And I would give it a rough property of the yourself that I want the user to go to any time they click
on this link.
So for example for going over to page 2 I might give it an HGF of page 2 and then to make sure that
a user could successfully navigate back to page 1.
I would copy paste that anchor tag down to page two down here but I would change the ref to be just
forward slash and then I would probably change the text to say navigate to page 1 like so.
OK.
So let's test this out.
Now this is how we handle navigation in a traditional each T.M. app.
So if I go back over I see navigate to page 2 I can click on that link.
I then see my page to component appear on the screen and then I can click on that link again and go
back over to page 1.
So it might appear that this is working perfectly and then we can navigate between these different routes.
But unfortunately although this appears to be working well or working as we would expect it's not actually
how we want to handle navigation inside of a re-act rudder app.
So we would say that this approach of using anchor tags would be bad.
I'm going to put that text in here to see if you reference this code in the future you understand that.
No we don't want to use anchor tags with re-act router.
So let me tell you why we do not want to use anchor Tex.
All right so a quick diagram right here.
So here's what happens when you add in an anchor tag to your application and then a user clicks on it.
This is essentially the process that your browser goes through for every standard anchor tag out there
on the Internet.
So this is the normal operation of your browser so you add an anchor attached your application with
an 8 Tref of something like splash page 2 and then at some point time either you click it or your user
clicks it.
Now what your browser does is make a request to localhost 3000 splash page to that's going to make a
request to our re-act development server.
Anytime you make a request to a reactive elements server it's going to respond with our index.
Each file.
Even if you attempt to navigate to slash page two and I'll tell you a little bit more about that in
just a second.
But right now I just understand that if we make a request to slash page two we're going to always get
back or index.
Each e-mail file the same one that is inside of our public directory.
Now when the browser receives that index each team file it's going to take whatever current HMO document
it's showing on the screen and it's going to remove all that HGL from the screen.
It's going to completely dump all that HMO.
And in addition it's also going to dump all of the javascript code and all the javascript variables
and data inside of your application as well.
Now that right there is specifically why we do not want to use anchor tags inside the reactor outer
application.
If you put anchor tags inside of your app and then you click on one you're making a brand new request
to some outside server that's going to return a brand new HD document and then show it on the screen
during that process the normal operation of the browser is to dump all variables in memory all javascript
data gets entirely dumped.
So that means that in the context of your reaction redux application any data that you had loaded up
like any API requests or anything that user had typed in anything whatsoever is going to be 100 percent
white and you entirely lose access to it.
And so you would have to Rifat all that data a second time or have your user type all that data in which
is obviously something that we probably don't want to happen inside of our app.
Now after the browser loads up the new index to a single file it's going to regroup our application
execute the javascript code inside their inner application is going to start up a second time but this
time it's not going to have any of the data that it just had two seconds ago.
So this entire process right here is what absolutely always happens.
Any time a user clicks on an anchor tag.
And it's what we do not want to do inside of a re-act Rotterdam application.
All right so now that we understand how we're not going to handle navigation Let's take a quick pause.
When we come back the next section I'll show you how we're going to handle navigation inside of a re-act
router app.
So quick break and I'll see you in just a minute.