In the last section we noticed a big issue inside of our application when we went to post slash knew.
We saw both the Post index component and the Post's new component appear on the screen at the same exact
time.
And so if you recall a little bit ago I said that we did kind of leave in our little bug around react
router.
So this is that bug right here.
This is the kind of outstanding issue that I mentioned a little bit ago.
Again I left this in very purposely because this is something I think that you'll probably run into
when you start working on your own application.
And so I wanted to point it out make sure that it's really clear why this is being caused.
So just to reiterate the problem here is that we are seeing both components appear on the screen while
we go to the post slash new route.
But if we look at our route configuration we have one route that says well hey only show if the users
on the route route and then another one that says show if we are on post-blast new.
So when we're on post-blast new we see the post-New component.
So I'd say that like this appears to be a quirk in the way we expect when we go to that route we see
that component everything is working the way we expect.
So I really think that there's probably something wrong about this route definition right here.
Something is going wrong with this statement.
It's only cut to the chase and tell you a little bit about what's going on behind the scenes when you
specify a path property on a route it is matched kind of like fussily against the current route.
So reactor two really says OK I see this route has a path of slash does this route right here contain
a forward slash in it.
And the answer is obviously yeah it does contain a forward slash right here.
Right after the 1880.
So reactor rider says well I'm going to try to just kind of leisurely or kind of fussily or loosely
match the route path against the current route that the user is looking at.
And so it thinks Well hey there's a forward slash So I guess we're good to go.
We could probably see the same behavior if we put say posts in here.
So now if I say this and refresh the page we're going to see both components appear on the screen even
though very clearly among slash slash new.
So the API around re-act router behaves just a little bit unexpectedly here.
If you're used to traditional routing in web applications like say express or rails or Django flask
anything like that you kind of wouldn't really expect this right here to match the path that we are
seeing inside the browser right now.
So Riyadh's writer kind of does this loose match again kind of unexpected.
So the solution is to use another component coming out of re-act router and that component.
Before we pull that in I'm going to delete posts right here because we don't want to deal with that
route.
So that component that we're going to pull in is called the switch component.
So let's import it from reactor router dong we'll get switch right there.
This switch component takes in a collection of different routes.
So in practice we usually nest a couple of routes within a switch component like this right here.
The switch component will look at all the routes inside of it and then it will decide to only render
the first route that matches the current you are l.
So in other words you can put your most specific routes at the top of the list.
So I'm going to move post-blast into above just slash.
So I'll put my most specific route at the top of routes that we're passing off to the switch when switch
tries to render all its children.
That's going to say OK what's the first route inside of you or what's the first route inside of this
list that matches the current you are out.
So while forward slash still does match the current You are all of post-blast new.
This right here also matches it as well.
It is listed above the route route.
And so this one will be rendered instead of post index.
So let's say this file and inside the browser now.
So refresh and OK now we see just post-blast new and if we go back to our route route of localhost ADHD
we correctly see posts with hi they're listed.
So this is work in way more or less around the realms of what we would probably expect if you're used
to react rodder version 2 or version 3.
So any of the previous versions of re-act router This is probably the biggest difference in the API.
If you are familiar with those previous versions you probably recognize that browser router the route
component all that kind of stuff but it's the inclusion of this switch thing in here that starts to
kind of change up the API a little bit.
OK.
So again we fix this problem right here.
Let's continue on in the next section.