In this video I want to continue covering re-act router and focusing a little bit more on this snippet
in particular.
I want to take a look at some of the different properties that we passed off to both these components
both route components got a path property.
This property right here is what is used by re-act router to decide whether or not to show this given
component on the screen.
On the first route we then have the key word exact.
We'll talk about what exact does in just a moment the last prop on here of component does exactly what
you would think it does when we pass in the component.
If this route right here is matched by the given that you are that the user is visiting we're going
to show either page one or page two.
Now something I want you to be aware of is that in a re-act router application different routes can
be matched by the same.
Well let me show you what I mean by that.
I'm going to take the first route right here and I'm going to duplicate it right above itself.
So I now have two identical routes inside of my application Alden's saved this file and then flip on
over to the browser and then go to my you are bar and I'll make sure that I navigate back to local losed
3000.
Then when I get there I see Page 1 appear on the screen twice.
So inside of a re-act rodder application we can very easily have multiple route components that match
a given you are all in all showed themselves to the user.
Now this is absolutely by design because there are some cases where we will define different route components
deeply nested inside of different components inside of application.
And so by deeply nesting routes we can customize how some part of our app looks depending upon the or
L and we don't have to pass down some deep configuration through redux or props or something like that
to configure how a very deeply nested child component renders itself.
OK I'm going to delete that duplicated route.
Now I want to tell you a little bit more about what that exact word means.
So like I said just a second ago a single route or C a single L or a single path can be matched by different
routes inside of application notes tried taking off that exact key word right there.
You're going to see some really interesting behavior All right I'm going to save this file and then
I'll flip back over to my application.
Now I'm still at local shows three.
And I see the text page one up here on the screen.
Now I'm going to navigate to page two and you're going to start to see something kind of interesting.
So when I go over to page 2 I see both the route for page one and Page two rendered on the screen.
So this might be a little bit surprising.
And I know it definitely is surprising to me.
I very frequently run into this and just knock my head against the wall with re-act rudder because of
this little issue right here.
So you might have thought that because we went to slash page two we would only show the second route
on the screen but that is not the case with re-act router.
You see this path property right here has some very interesting behavior that is kind of hard to understand
at first glance.
So to help you understand why we saw both routes appear on the screen when we went to splash page 2
I want to show you a couple of diagrams to help you understand exactly what the path property does for
us.
So in this diagram right here I have some address that we put into our address bar.
Now as we've discussed re-act router only cares about what is listed after the dot com or the dot net
or the edu or the or definition whatever is inside of your you are l.
So in this case re-act router would just care about the path of forward slash.
So now using this path right here I want to figure out what different route definitions would be shown
inside of application.
In this case we would only be showing the first route definition the one with a path of just forward
slash.
We would not show path of slash page or path of slash page slash 5.
The rule that we use for deciding what components or what routes are going to be shown on the screen
is this little snippet of code right here.
So this is not the exact code that re-act router internally runs but it kind of works like 90 percent
of the time for figuring out what is going on.
So essentially we take the string of the extracted path from the L and we can imagine that we'd run
the contains method with the path inside of each of our different route components that just you know
that contains method is going to essentially check if this string exists inside of this string.
So in this case we would ask ourselves OK does this string contain the path forward slash or contain
the string for its slash.
In this case it does.
So this route would be visible on the screen and we would see it appear when we loaded our application
then we would move onto the next route and we would say OK does this path right or this string contain
the string slash page.
In this case no.
So we would not show this route.
And then the same thing with this third route down here as well.
Now let's continue on to another quick example here.
Now on this one I kind of abbreviated it just a little bit to make this go a little bit faster.
So let's imagine that we go to localhost 3000 slash page.
So now our extracted path is slash page.
So now we would say does this string right here contain this path.
Well in this case it does because we have four slash here and we have the forward slash right there.
So this string contains that string and so we would show that route component on the screen.
We would then move onto the next route and we would say does this string contain that string.
In this case it does slash page matches perfectly with Slash page and then we would move on to our last
route.
So sashed page does that contain the string slash page slash 5.
In this case no it does not.
So we would not show that route.
And then finally if we want to look closer at thousand slash page slash five I bet you can imagine up
this route right here.
This string contains that string.
It contains that string and it contains that string.
So this right here is the rule that re-act writer uses to decide whether or not to show a given route
on the screen and it explains why we see both of these routes appear.
So we navigated to a route of slash page two.
So we would say does slash ph to contain the character forward slash.
Yes it does.
So this route is rendered on the screen.
We would then move on to the next route and we would say does slash page to contain the string slash
page too.
Yes it does.
OK.
And this route is displayed on the screen as well.
So that is the rule that re-act router uses.
Now you might be thinking to yourself that sounds like a crazy town rule like why does it do that.
Well you're going to see that inside of re-act router there are sometimes some rules that are sometimes
a little bit confusing or not quite what you would expect.
I will say that the authors of Riak router do everything that they do for a very good reason.
So there are some good reasons that you would want to have some routes that kind of eagerly maps themselves
in this fashion but I just want you to know that sometimes this behavior is going to be a little bit
unexpected.
Now in order to override this behavior we can find all of our given routes and we can optionally add
on a prop of exact Lysa to see note when we type out a key word inside of a GSX tag like so it is equivalent
to saying equals true.
So anytime you list out just a property name the component that you added to interpret that as having
a prop equal to true.
So inside of the component it would think that this Propst not exact would equal the value true.
So that's what happens when you just put the key word like that by itself.
When you add on a prop name of exact it causes re-act rider to change the rule that it uses for matching
the power slightly.
And as you would expect it essentially changes it to does extracted path equal the string path which
is way closer to how a lot of people probably imagine this system would or should work.
So now with the key word on there we would say does the route of slash page to exactly equal the string
slash.
Well no it doesn't.
So we would now not show that route component on the screen however does flash page to contain slash
page 2.
Yes it still does.
So we would show that route component on the screen.
Now last thing I want to understand is that when we add on this exact keyword it only modifies the route
that you add it to.
So if we had a second route right here with a path of slash that does not have the exact word then this
one right here would be shown on the screen when the user goes to slash page 2.
And so if I say save that you see that I see Page 1 appear again.
Look at Saddam we have a better idea of how reac router works internally and how it matches this path
in this kind of confusing fashion.
Well let's continue with our application in the next video.