1 00:00:00,710 --> 00:00:05,750 In the last section we noticed a big issue inside of our application when we went to post slash knew. 2 00:00:05,760 --> 00:00:11,730 We saw both the Post index component and the Post's new component appear on the screen at the same exact 3 00:00:11,730 --> 00:00:12,580 time. 4 00:00:12,640 --> 00:00:18,070 And so if you recall a little bit ago I said that we did kind of leave in our little bug around react 5 00:00:18,080 --> 00:00:18,650 router. 6 00:00:18,810 --> 00:00:20,450 So this is that bug right here. 7 00:00:20,460 --> 00:00:24,010 This is the kind of outstanding issue that I mentioned a little bit ago. 8 00:00:24,180 --> 00:00:28,560 Again I left this in very purposely because this is something I think that you'll probably run into 9 00:00:28,560 --> 00:00:30,910 when you start working on your own application. 10 00:00:30,930 --> 00:00:35,760 And so I wanted to point it out make sure that it's really clear why this is being caused. 11 00:00:35,820 --> 00:00:41,610 So just to reiterate the problem here is that we are seeing both components appear on the screen while 12 00:00:41,610 --> 00:00:44,450 we go to the post slash new route. 13 00:00:44,580 --> 00:00:50,730 But if we look at our route configuration we have one route that says well hey only show if the users 14 00:00:50,730 --> 00:00:56,480 on the route route and then another one that says show if we are on post-blast new. 15 00:00:56,490 --> 00:00:59,910 So when we're on post-blast new we see the post-New component. 16 00:00:59,940 --> 00:01:04,680 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 17 00:01:04,680 --> 00:01:07,680 that component everything is working the way we expect. 18 00:01:07,680 --> 00:01:12,510 So I really think that there's probably something wrong about this route definition right here. 19 00:01:12,510 --> 00:01:14,800 Something is going wrong with this statement. 20 00:01:14,910 --> 00:01:19,620 It's only cut to the chase and tell you a little bit about what's going on behind the scenes when you 21 00:01:19,620 --> 00:01:26,620 specify a path property on a route it is matched kind of like fussily against the current route. 22 00:01:26,760 --> 00:01:35,580 So reactor two really says OK I see this route has a path of slash does this route right here contain 23 00:01:35,580 --> 00:01:37,040 a forward slash in it. 24 00:01:37,080 --> 00:01:41,060 And the answer is obviously yeah it does contain a forward slash right here. 25 00:01:41,070 --> 00:01:42,820 Right after the 1880. 26 00:01:43,230 --> 00:01:48,270 So reactor rider says well I'm going to try to just kind of leisurely or kind of fussily or loosely 27 00:01:48,270 --> 00:01:52,660 match the route path against the current route that the user is looking at. 28 00:01:52,710 --> 00:01:56,680 And so it thinks Well hey there's a forward slash So I guess we're good to go. 29 00:01:57,060 --> 00:02:01,160 We could probably see the same behavior if we put say posts in here. 30 00:02:01,470 --> 00:02:09,360 So now if I say this and refresh the page we're going to see both components appear on the screen even 31 00:02:09,360 --> 00:02:12,450 though very clearly among slash slash new. 32 00:02:12,450 --> 00:02:17,200 So the API around re-act router behaves just a little bit unexpectedly here. 33 00:02:17,280 --> 00:02:23,400 If you're used to traditional routing in web applications like say express or rails or Django flask 34 00:02:23,400 --> 00:02:29,370 anything like that you kind of wouldn't really expect this right here to match the path that we are 35 00:02:29,430 --> 00:02:31,090 seeing inside the browser right now. 36 00:02:31,230 --> 00:02:35,930 So Riyadh's writer kind of does this loose match again kind of unexpected. 37 00:02:36,450 --> 00:02:41,550 So the solution is to use another component coming out of re-act router and that component. 38 00:02:41,640 --> 00:02:44,940 Before we pull that in I'm going to delete posts right here because we don't want to deal with that 39 00:02:44,940 --> 00:02:45,870 route. 40 00:02:46,530 --> 00:02:50,700 So that component that we're going to pull in is called the switch component. 41 00:02:50,700 --> 00:02:55,290 So let's import it from reactor router dong we'll get switch right there. 42 00:02:55,830 --> 00:02:59,750 This switch component takes in a collection of different routes. 43 00:02:59,760 --> 00:03:06,160 So in practice we usually nest a couple of routes within a switch component like this right here. 44 00:03:08,710 --> 00:03:14,130 The switch component will look at all the routes inside of it and then it will decide to only render 45 00:03:14,130 --> 00:03:17,230 the first route that matches the current you are l. 46 00:03:17,430 --> 00:03:22,280 So in other words you can put your most specific routes at the top of the list. 47 00:03:22,350 --> 00:03:26,960 So I'm going to move post-blast into above just slash. 48 00:03:27,360 --> 00:03:33,060 So I'll put my most specific route at the top of routes that we're passing off to the switch when switch 49 00:03:33,060 --> 00:03:34,570 tries to render all its children. 50 00:03:34,590 --> 00:03:39,450 That's going to say OK what's the first route inside of you or what's the first route inside of this 51 00:03:39,450 --> 00:03:42,100 list that matches the current you are out. 52 00:03:42,390 --> 00:03:47,340 So while forward slash still does match the current You are all of post-blast new. 53 00:03:47,560 --> 00:03:50,820 This right here also matches it as well. 54 00:03:50,850 --> 00:03:52,840 It is listed above the route route. 55 00:03:52,860 --> 00:03:56,840 And so this one will be rendered instead of post index. 56 00:03:56,850 --> 00:04:00,280 So let's say this file and inside the browser now. 57 00:04:01,030 --> 00:04:09,450 So refresh and OK now we see just post-blast new and if we go back to our route route of localhost ADHD 58 00:04:10,010 --> 00:04:13,100 we correctly see posts with hi they're listed. 59 00:04:13,200 --> 00:04:18,540 So this is work in way more or less around the realms of what we would probably expect if you're used 60 00:04:18,540 --> 00:04:20,890 to react rodder version 2 or version 3. 61 00:04:20,910 --> 00:04:25,950 So any of the previous versions of re-act router This is probably the biggest difference in the API. 62 00:04:26,310 --> 00:04:30,900 If you are familiar with those previous versions you probably recognize that browser router the route 63 00:04:30,900 --> 00:04:35,910 component all that kind of stuff but it's the inclusion of this switch thing in here that starts to 64 00:04:36,240 --> 00:04:38,380 kind of change up the API a little bit. 65 00:04:38,840 --> 00:04:39,130 OK. 66 00:04:39,150 --> 00:04:41,300 So again we fix this problem right here. 67 00:04:41,310 --> 00:04:43,820 Let's continue on in the next section.