In the last section we installed re-act router and we're not going to take a little bit of time to discuss
exactly what it's going to do for us.
I want to start off by not really discussing react router at all.
I want to first talk to you about how the web used to work.
So how did web pages work.
Back in the 1990s in the early 2000s and even parts of early 20.
I suppose what we call it now is this how the web used to work and large parts of it.
Let me be clear.
Still do this exact same way a user sitting inside their browser and they see some link on the page
like an anchor tag right.
They see some link on the page and they say oh that looks like an interesting link.
I'm going to click that link and go to that new document.
So essentially the user is changing the URL inside their browser.
When the user clicks on the link that issues traditionally say traditionally it issues a new request
for some new web page from some remote server.
So the user might say click on a link that goes to Google dot com that reaches out to Google dot com
grab some HTL document from some server and that each document is sent back to the user's browser where
the document then appears on the screen.
The purpose of re-act router is to completely circumvent this process right here with re-act router.
We are no longer making requests to our server to get a web page receiving a web page back and then
showing that page to the user instead re-act router intercepts changes to the u r l.
It says Oh I see the user is trying to navigate to a different L.
I'm going to I'm going to stop that the user from navigating to different page.
And instead I'm going to manually look at the URL and I'm going to decide to display a different set
of components on the screen based on what that New York URL is.
So let's kind of walk through that flow let's get a better idea of how that works in great great detail.
OK.
So here's what's going to go on behind the scenes when we're using re-act router instead of traditional
web application navigation.
So in this world we also make use of a package called history.
Now we don't actually have to set up this history package ourselves.
It was automatically installed for us when we installed re-act router.
So history is already going to be running behind the scenes for us.
And I only put on this diagram to just kind of let you know that it exists.
OK.
So let's walk through this diagram now.
So let's say again that the user sees some interesting link on the page and they say oh looks like an
interesting link like your might be then clicking on the button that says Create a new post.
Or they might be attempting to look at a very particular post.
So let's just imagine that the user clicks on some link that's going to change the URL inside their
browser.
When that happens the browser says to the History Library hey the user just changed the URL.
Here's the new your your l.
Here's the new one that they're trying to visit.
The new route that they are attempting to go to the history library takes that new change to you or
else.
It does some parsing over it and figures out exactly what changed about the R L and then it passes it
on to the re-act router library.
So history is communicating this new route over to react router reactor routers going to receive that
new route and it's going to decide to show a new set of components on the screen based on exactly what
that new route is our place in this whole process right here is to set up that configuration inside
of re-act router.
So we're going to be writing the code that says hey react router if you are l looks like this.
And I want you to show this component.
If it looks like that that I want you to show that component so that some configuration that we're going
to be creating manually and passing to react router once re-act router has decided what set of components
to display on the screen based on the L. It's going to say to react Hey react.
It looks like we've got a new set of components to show on the screen please.
Re rendering yourself or render all the components that are visible based on this new set of components.
So it passes or delegates off to react react takes over says OK I guess these are the new components
we're going to display and it renders them onto the screen as content and then just kind of sits around
and waits for the user to change the URL again.
So this entire architecture that we're looking at right here is the idea behind single page applications
or espies or spa's.
I hear them called those terms interchangeably.
The idea behind a single page application is that we are no longer navigating between distinct HTL documents
that are being created by some remote web server.
Instead we're always dealing with a single HMO document and we are relying upon some javascript to change
the set of components that a user sees appearing on the screen.
So in practice it's really quite interesting to think about it user only ever loads a single small document
and we're really just kind of tricking the user into thinking that they actually are navigating to other
pages when in fact we're just showing them different sets of components.
OK.
So now we've got at least a better idea somewhat of what re-act rodders going to be doing for us.
Remember it's going to take an input you are l and it's going to decide what component to show on the
screen.
Now we've got a better idea of exactly how that works.
Let's start making use of re-act router inside the next section.