In the last video we put together a quick example it's re-act writer Dom and then tested it out inside
of our browser.
In this video to show you a couple of diagrams to help you understand exactly how re-act Rotterdam works.
Now we very easily noticed that when we navigated to different roles inside of our browser we saw different
content appear on the screen and it appeared to be depending upon the different route that we added
into this you l.
So if I went to local or 3000 I saw page one but if I went to localhost three thousand slash page two
I saw some entirely different content.
The first thing I want you to understand here is exactly what part of the L react router cares about.
All right.
Quick diagram right here.
So when you and I visit localhost 3000 and we type that address into our Ural it loads up our application
but re-act router does not care about the entire Ural.
In other words re-act router does not care that we went to a domain of local host or that we were at
Port 3000 instead re-act router only cares about all the characters that are listed after the domain
definition and the port definition localhost 3000 is interpreted as being localhost 3000 slash.
Just the note that is a toll equivalent your L2 just local is 3000.
That's a quick example if you flip back over and go to look almost 3000 slash.
It still loads up our application.
Now I've got a couple of other demonstrations or examples here on the screen.
So if we go to localhost 3000 slash page one re-act router only cares about everything after the port
and the domain to react Retter would only care about Flash page 1.
Likewise if we went to say arean B.Com slash listing slash Spain re-act router would only consider slash
listings slash.
Spain when deciding what content to disappear to display on the screen.
So with that in mind let's take a look at another diagram that's going to show you how this part of
the domain that you're visiting or the Eurail that you're visiting is going to be used by re-act router.
OK so when we created our application and loaded up inside the browser We created an instance of the
browser router component the browser router internally creates an object of its own called The History
object its history object is going to look at the inside of your address bar and its going to extract
just that portion of the you that react rather curious about just everything after the domain name or
the port.
So just this portion that you see over here the history object is then going to communicate that path
over to browser router and then browser router is then going to communicate that path down to both of
your route components.
The components are going to decide either to show themselves or height themselves depending upon the
path inside of the Eurail that the user is visiting and the path property that was passed when it was
created.
So in other words when we visit localhost 3000 slash like so we have a path of Ford slashed by itself.
And so as you might imagine we have a route right here with a path of forward slash the L and the path
property right here match up.
And so re-act router decides to show this route component on the screen.
Likewise if we go to local those 3000 slash page two we now have a path inside of our Eurail of slash
page 2.
And so that is equal to the path property right here of page 2.
And so we see this route component on the screen instead.
Now that's a very simple demonstration or explanation of exactly how the path property works inside
of re-act router but there are some real gotchas around that path property that are going to end up
being quite frustrating for you in the future.
So lets take a pause right here.
When we come back the next section I'm going to show you some gotchas around this path Propp and we
pass off to the route component.
In some ways that might make you think that this is not quite working as you would expect.
So quick pause and I'll see you in just a minute.