1 00:00:00,840 --> 00:00:05,450 In the last video we got our links working for each of these different streams so I can now click on 2 00:00:05,450 --> 00:00:08,010 a title and see streams show appear. 3 00:00:08,200 --> 00:00:12,820 Now before we start to develop streams show too much I want to show you some really interesting behavior 4 00:00:12,830 --> 00:00:15,710 here is something that's probably going to be pretty unexpected. 5 00:00:15,900 --> 00:00:20,180 I going to go back to my list of streams and then I'm going to click on the Create stream button on 6 00:00:20,180 --> 00:00:25,280 the bottom right hand side and when I do so I see the Create stream component but you'll notice at the 7 00:00:25,280 --> 00:00:29,550 bottom we see something really interesting we see stream show. 8 00:00:29,810 --> 00:00:35,570 So it appears that when we go to stream slash new we see both the Create stream component and streams 9 00:00:35,570 --> 00:00:38,420 show at the same exact time. 10 00:00:38,450 --> 00:00:39,900 So what's going on here. 11 00:00:39,950 --> 00:00:45,020 Well this is kind of one of the downsides to react router and how they choose to implement navigation 12 00:00:45,260 --> 00:00:47,210 with these different route objects. 13 00:00:47,210 --> 00:00:50,440 All right so let's flip back over to our J.S. file. 14 00:00:50,600 --> 00:00:55,730 So inside of apts just remember we have all of our route configurations so essentially we are running 15 00:00:55,730 --> 00:01:02,870 into a scenario where if we go to streams slash new we see both stream create but we also see stream 16 00:01:02,930 --> 00:01:03,750 show. 17 00:01:03,860 --> 00:01:08,480 Now I want to remind you when we first started talking about re-act router Dom we spoke about how re-act 18 00:01:08,480 --> 00:01:11,390 router tries to match these different paths greedily. 19 00:01:11,390 --> 00:01:17,080 In other words if a given path matches a route the route will be shown no matter what re-act router 20 00:01:17,090 --> 00:01:18,830 Dohm doesn't try to just show one route. 21 00:01:18,860 --> 00:01:22,660 It's going to show every single route that matches the given path. 22 00:01:22,670 --> 00:01:27,250 So with that in mind I want you to look at streams slash new right here look at that route. 23 00:01:27,320 --> 00:01:34,130 So streams slash new and and look at the route or the path of streams show down here at the bottom streams 24 00:01:34,190 --> 00:01:38,000 slash wild card are kind of like variable here on the end. 25 00:01:38,060 --> 00:01:46,220 Now up to this point we've been accessing routes of like streams slash five or 20 or three or 100 or 26 00:01:46,220 --> 00:01:47,780 whatever the I.D. was. 27 00:01:47,870 --> 00:01:51,490 But remember the Colan right here is essentially a variable. 28 00:01:51,530 --> 00:01:58,560 It does not only match variables that are numbers it will match anything in that part of the or else. 29 00:01:58,730 --> 00:02:04,790 So in this case this route right here with streams show when we go to stream slashed new ID right here 30 00:02:04,880 --> 00:02:11,060 is essentially taking the text new because it thinks New Right here is like a variable or a idea of 31 00:02:11,060 --> 00:02:11,960 sorts. 32 00:02:11,960 --> 00:02:15,570 And so that's why you're seeing both stream create and streams show. 33 00:02:15,890 --> 00:02:23,090 So we need to figure out some way to only show either streams new or stream slash colon ID in order 34 00:02:23,090 --> 00:02:27,740 to do so we're going to import another helper component from re-act Rotterdam. 35 00:02:28,250 --> 00:02:33,740 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 36 00:02:33,740 --> 00:02:36,700 called switch. 37 00:02:36,760 --> 00:02:42,360 So back down at my route definition I'm going to wrap all of these routes inside of that switch thing 38 00:02:42,360 --> 00:02:43,820 that we just imported. 39 00:02:43,920 --> 00:02:49,890 So I'll say switch opening tag and then at the bottom of all of our routes open and another switch like 40 00:02:49,890 --> 00:02:56,500 so so switch right here is going to look at all these different routes and it's only going to show one 41 00:02:56,530 --> 00:03:00,010 of these given routes for any path that we go to. 42 00:03:00,010 --> 00:03:04,810 So the first route inside of your that gets Matt matched by a given path is going to be shown and nothing 43 00:03:04,810 --> 00:03:05,740 else. 44 00:03:05,740 --> 00:03:11,290 So now whenever we go to stream slash knew this route will be shown and re-act Rotterdam is going to 45 00:03:11,290 --> 00:03:15,390 say OK I found a route right here to show I'm not going to show any other potential route. 46 00:03:15,580 --> 00:03:21,370 So even though technically stream's slash ID colon ID would match stream slash knew it will not be shown 47 00:03:21,370 --> 00:03:24,180 because it's now wrapped inside of the switch. 48 00:03:24,490 --> 00:03:30,910 So now we can save this flip back over and when we go to stream slash knew we will no longer see streams 49 00:03:31,000 --> 00:03:35,060 show at the bottom as we would probably expect. 50 00:03:35,130 --> 00:03:35,740 OK. 51 00:03:35,890 --> 00:03:39,550 So this is a problem that I really expect you're going to run into when you start working on your own 52 00:03:39,550 --> 00:03:40,180 project. 53 00:03:40,270 --> 00:03:44,610 Remember any time that it feels like re-act Rotterdam is showing a component that it shouldn't show. 54 00:03:44,620 --> 00:03:49,960 Chances are you've got one of these little query parameters on here and that's probably what is throwing 55 00:03:49,960 --> 00:03:51,120 off your route matching. 56 00:03:51,250 --> 00:03:56,060 And you can very easily solve this by just adding in a switch to wrap all of your different routes. 57 00:03:56,490 --> 00:03:56,780 OK. 58 00:03:56,810 --> 00:04:00,270 Now that we've got this put together let's take a break when we come back the next video. 59 00:04:00,280 --> 00:04:02,440 We'll continue working on our streams show component.