1 00:00:00,930 --> 00:00:02,070 Instructor: In the last section we added 2 00:00:02,070 --> 00:00:04,680 React Router to our index dot js file. 3 00:00:04,680 --> 00:00:07,470 We're now gonna flip over to our app dot js component, 4 00:00:07,470 --> 00:00:09,210 inside of our components directory 5 00:00:09,210 --> 00:00:12,185 and add in a couple of routes to this thing as well. 6 00:00:12,185 --> 00:00:15,450 Normally, when we put together a React router application 7 00:00:15,450 --> 00:00:17,220 we will designate all the different routes 8 00:00:17,220 --> 00:00:18,810 that a user can visit inside of 9 00:00:18,810 --> 00:00:21,480 the topmost index dot js file. 10 00:00:21,480 --> 00:00:22,350 But this time around, 11 00:00:22,350 --> 00:00:24,870 just to save ourselves a little bit of refactoring, 12 00:00:24,870 --> 00:00:26,820 we're just gonna define our routes directly 13 00:00:26,820 --> 00:00:29,010 inside the app component instead. 14 00:00:29,010 --> 00:00:30,780 This is actually gonna make life a little bit easier 15 00:00:30,780 --> 00:00:33,993 later on as well, when we start to introduce authentication. 16 00:00:35,490 --> 00:00:38,520 So at the top of the file I'm going to import 17 00:00:38,520 --> 00:00:43,200 the route component from React router dom, 18 00:00:43,200 --> 00:00:45,900 and then I will replace both my comment box right here, 19 00:00:45,900 --> 00:00:49,053 and my comment list with route components instead. 20 00:00:49,950 --> 00:00:51,360 Remember that we only want to show 21 00:00:51,360 --> 00:00:54,300 the comment box component, if a user is looking at 22 00:00:54,300 --> 00:00:59,300 the route of slash post right here. 23 00:00:59,790 --> 00:01:02,640 And if the user is at the root route of just slash, 24 00:01:02,640 --> 00:01:05,310 then we want to show the comment list. 25 00:01:05,310 --> 00:01:08,717 So to accommodate for both those I'll add in a route 26 00:01:08,717 --> 00:01:11,650 with a path of slash post 27 00:01:13,050 --> 00:01:14,760 and whenever a user goes to that route, 28 00:01:14,760 --> 00:01:16,953 I'll show the comment box component. 29 00:01:18,390 --> 00:01:20,670 And then I'll define my second route underneath that 30 00:01:20,670 --> 00:01:23,160 and I'll say anytime someone is at the root route. 31 00:01:23,160 --> 00:01:24,930 So just slash by itself, 32 00:01:24,930 --> 00:01:28,653 I'll show the component comment list instead. 33 00:01:29,640 --> 00:01:31,320 Now, before I flip back over to the browser 34 00:01:31,320 --> 00:01:34,140 to test this out, one quick thing that I'm going to do 35 00:01:34,140 --> 00:01:37,590 is flip on over to my comment list component 36 00:01:37,590 --> 00:01:39,420 and inside the div right here, 37 00:01:39,420 --> 00:01:41,650 I'm gonna add on a h4 38 00:01:43,170 --> 00:01:45,753 that says comment list. 39 00:01:47,340 --> 00:01:50,130 The reason I'm doing this is that our component comment list 40 00:01:50,130 --> 00:01:51,990 doesn't actually show anything on the screen, 41 00:01:51,990 --> 00:01:55,050 unless we have some comments inside of our application. 42 00:01:55,050 --> 00:01:56,640 So just to get a better sense 43 00:01:56,640 --> 00:01:58,380 of when this component is appearing on the screen 44 00:01:58,380 --> 00:02:00,240 without having to add in comments, 45 00:02:00,240 --> 00:02:02,103 I'm just gonna add that h4 in. 46 00:02:03,000 --> 00:02:04,620 Okay, so that's pretty much it. 47 00:02:04,620 --> 00:02:06,300 I'll now flip back over to my browser 48 00:02:06,300 --> 00:02:08,133 and we'll test out those changes. 49 00:02:10,139 --> 00:02:12,750 So now when we go back over to local host 3000, 50 00:02:12,750 --> 00:02:15,480 the page reloads, and we should see comment list 51 00:02:15,480 --> 00:02:17,700 by itself appear on the screen. 52 00:02:17,700 --> 00:02:21,423 And if we go to local host 3000 slash post, 53 00:02:22,470 --> 00:02:25,863 we should see just the comment box up here instead. 54 00:02:27,060 --> 00:02:28,920 Now, when this loads up, here's the comment box, 55 00:02:28,920 --> 00:02:30,210 but you'll also notice we see 56 00:02:30,210 --> 00:02:32,130 the comment list down here as well. 57 00:02:32,130 --> 00:02:33,360 So the comment list is showing up 58 00:02:33,360 --> 00:02:35,580 when we don't really want it to. 59 00:02:35,580 --> 00:02:37,260 The reason for that is the path 60 00:02:37,260 --> 00:02:39,273 that we added to the comment list. 61 00:02:40,350 --> 00:02:43,050 We have a path right here of forward slash, 62 00:02:43,050 --> 00:02:44,880 just forward slash by itself 63 00:02:44,880 --> 00:02:47,190 and technically any route that we visit 64 00:02:47,190 --> 00:02:49,620 will match that forward slash. 65 00:02:49,620 --> 00:02:51,420 So even though we're at slash post right now, 66 00:02:51,420 --> 00:02:55,050 that still matches against this path designation. 67 00:02:55,050 --> 00:02:56,370 So to tell this route component 68 00:02:56,370 --> 00:02:59,070 to only show itself if we are at exactly 69 00:02:59,070 --> 00:03:03,063 the root route, we can add on the exact prop, like so. 70 00:03:03,930 --> 00:03:06,570 So now whenever React router decides whether or not 71 00:03:06,570 --> 00:03:08,280 to show this route, it's gonna say, 72 00:03:08,280 --> 00:03:10,980 is the route exactly forward slash? 73 00:03:10,980 --> 00:03:13,020 If it is, show the comment list. 74 00:03:13,020 --> 00:03:14,643 Otherwise do not show it. 75 00:03:16,020 --> 00:03:18,690 So now if I flip back over and go to slash post. 76 00:03:18,690 --> 00:03:20,430 I only see my comment box. 77 00:03:20,430 --> 00:03:22,859 And if I go back to just slash by itself 78 00:03:22,859 --> 00:03:24,930 or local host by itself, 79 00:03:24,930 --> 00:03:27,690 I should see my comment list appear instead. 80 00:03:27,690 --> 00:03:28,920 Very good. 81 00:03:28,920 --> 00:03:30,090 Okay, so good progress. 82 00:03:30,090 --> 00:03:31,080 Let's take a quick pause 83 00:03:31,080 --> 00:03:33,693 and continue developing this in the next section.