We've got some basic navigation now working inside of our app, but it's not quite perfect.
Let me tell you why.
I've got my network request log open.
I'm filtered by all requests and I've cleared my request log out.
I'm then going to click on one these links and when I do so, you'll see that a variety of different
requests are being issued.
I'm going to clear my request log again and click on another link.
So every single time that I click on one of these links, I'm making a wide variety of different quests.
Well, let's understand why that is and why it might not be the best thing.
OK, so this diagram right here is meant to represent a traditional normal H.T., male based Web application.
So not react or anything like that in a normal Web application.
So kind of a traditional Web app consisting of a variety of different A.T.M. documents you might navigate
to some Web page inside of your browser.
Whenever you navigate to a page, your browser makes a request off to some server and gets back in HD
mail document.
The H.G. Wells then passed and displayed on the screen.
Any appropriate script tags are loaded up along with any appropriate CSF tags as well.
Then whenever a user clicks on a link, your browser makes an entire nother request to another server
and gets back another HD mail document.
And again, that Estill document might have its own set of script tags and CSX.
But this is how a traditional Web page handles navigation.
We provide normal links whenever you click on a link.
You load up another HMO document.
And this is exactly what is happening inside of our app right now.
Whenever we click on one these links, we completely reload the entire index, not HMO file inside of
our project and reload all the JavaScript in all the C SS as well.
Now, that is not ideal inside of a react application.
We have already, when we first come to our application, loaded up our indexed DOT, HDMI file, all
the JavaScript, all the C SS.
There is no reason in a react app for us to do a hard reload of the page and reload all these different
assets instead will be really ideal is if we could click on one these links, update the URL but not
do a full page reload because a full page reload causes a whole bunch of network traffic that is not
required just to change some very basic content on the screen.
Let's take a look at a diagram and understand how we might better approach this problem of navigation.
All right, here we go.
So we're going to imagine what would ideally occur if a user is at local those three thousand and then
clicked on the list link, if I clicked on that list link right there and went over to this other page.
Here it is, ideally what we would do inside of rap.
So first, a user would click on that list link and then ideally we would change the URL but not do
a full page refresh.
So in other words, ideally, we would not make all these additional requests because we've already
loaded up all that JavaScript and all that CSX into our app.
Then each root component ideally could somehow detect that the oil has changed.
We could then possibly have each root component update some piece of state that is tracking the current
path name.
When we update some piece of state, each route could then re render and show the appropriate or hide
the appropriate components.
So in other words, whenever we click on some link inside of application in a react app, we just plain
do not want to refresh the entire page.
All we want to do is update the URL somehow.
And somehow get all of our different routes to update as well.
But we don't want to reload the index dot e-mail or all the associated CSX and J.S. That is the next
big challenge that we're gonna figure out.
We want to somehow click on a link, make the URL update, but not refresh or update all this different
content.
So let's figure out that in the next video.