In the last video we got our links working for each of these different streams so I can now click on
a title and see streams show appear.
Now before we start to develop streams show too much I want to show you some really interesting behavior
here is something that's probably going to be pretty unexpected.
I going to go back to my list of streams and then I'm going to click on the Create stream button on
the bottom right hand side and when I do so I see the Create stream component but you'll notice at the
bottom we see something really interesting we see stream show.
So it appears that when we go to stream slash new we see both the Create stream component and streams
show at the same exact time.
So what's going on here.
Well this is kind of one of the downsides to react router and how they choose to implement navigation
with these different route objects.
All right so let's flip back over to our J.S. file.
So inside of apts just remember we have all of our route configurations so essentially we are running
into a scenario where if we go to streams slash new we see both stream create but we also see stream
show.
Now I want to remind you when we first started talking about re-act router Dom we spoke about how re-act
router tries to match these different paths greedily.
In other words if a given path matches a route the route will be shown no matter what re-act router
Dohm doesn't try to just show one route.
It's going to show every single route that matches the given path.
So with that in mind I want you to look at streams slash new right here look at that route.
So streams slash new and and look at the route or the path of streams show down here at the bottom streams
slash wild card are kind of like variable here on the end.
Now up to this point we've been accessing routes of like streams slash five or 20 or three or 100 or
whatever the I.D. was.
But remember the Colan right here is essentially a variable.
It does not only match variables that are numbers it will match anything in that part of the or else.
So in this case this route right here with streams show when we go to stream slashed new ID right here
is essentially taking the text new because it thinks New Right here is like a variable or a idea of
sorts.
And so that's why you're seeing both stream create and streams show.
So we need to figure out some way to only show either streams new or stream slash colon ID in order
to do so we're going to import another helper component from re-act Rotterdam.
So up at the top I'm going to find my re-act writer Dom in port and I'm going to also import something
called switch.
So back down at my route definition I'm going to wrap all of these routes inside of that switch thing
that we just imported.
So I'll say switch opening tag and then at the bottom of all of our routes open and another switch like
so so switch right here is going to look at all these different routes and it's only going to show one
of these given routes for any path that we go to.
So the first route inside of your that gets Matt matched by a given path is going to be shown and nothing
else.
So now whenever we go to stream slash knew this route will be shown and re-act Rotterdam is going to
say OK I found a route right here to show I'm not going to show any other potential route.
So even though technically stream's slash ID colon ID would match stream slash knew it will not be shown
because it's now wrapped inside of the switch.
So now we can save this flip back over and when we go to stream slash knew we will no longer see streams
show at the bottom as we would probably expect.
OK.
So this is a problem that I really expect you're going to run into when you start working on your own
project.
Remember any time that it feels like re-act Rotterdam is showing a component that it shouldn't show.
Chances are you've got one of these little query parameters on here and that's probably what is throwing
off your route matching.
And you can very easily solve this by just adding in a switch to wrap all of your different routes.
OK.
Now that we've got this put together let's take a break when we come back the next video.
We'll continue working on our streams show component.