1 00:00:01,110 --> 00:00:02,670 So we've got our list of posts here. 2 00:00:02,670 --> 00:00:09,180 We just need to declare a new route that users can go to whenever they click a post to make that happen 3 00:00:09,200 --> 00:00:09,350 . 4 00:00:09,480 --> 00:00:15,380 We'll go ahead and declare a new route inside of our routes file. 5 00:00:15,600 --> 00:00:23,520 So back in our code editor open up Route start G-S and we'll go ahead and make a new route in here. 6 00:00:23,550 --> 00:00:30,670 We don't have the component for it just yet but we'll define that in just a minute we'll say wrote path 7 00:00:30,820 --> 00:00:32,980 and we'll get back to the path in just a second. 8 00:00:33,450 --> 00:00:42,420 And then in component posts show and so will create a post show here momentarily I'll mention it several 9 00:00:42,420 --> 00:00:42,930 times. 10 00:00:42,930 --> 00:00:47,780 Notice how we've got two s's in a row so it's posts show. 11 00:00:47,900 --> 00:00:52,050 Make sure you don't forget the s in here it's kind of easy to miss off if you wanted to just shorten 12 00:00:52,050 --> 00:00:53,580 it to post show. 13 00:00:53,670 --> 00:00:55,090 Totally fine go for it. 14 00:00:55,110 --> 00:00:57,640 Just make sure you stay consistent all the way through. 15 00:00:58,150 --> 00:01:04,050 OK so we do need a path for this but this is give me kind of like a little bit interesting right here 16 00:01:04,070 --> 00:01:04,510 . 17 00:01:04,950 --> 00:01:10,590 Let's flip back over to our Mark really quick and look at the show detail page. 18 00:01:10,590 --> 00:01:16,560 Notice how the route is PPO's slash 5 to 5. 19 00:01:16,560 --> 00:01:21,240 Here is intended to be the ID of the post so the intent behind this. 20 00:01:21,240 --> 00:01:28,050 You are right here is that a user should be able to save or bookmark this you or L navigate back to 21 00:01:28,050 --> 00:01:28,370 it. 22 00:01:28,440 --> 00:01:34,090 And always expect to see the exact same post show up on the screen right. 23 00:01:34,230 --> 00:01:40,080 I want to make sure that we fetch Post Number 5 whenever they come to this page right here. 24 00:01:40,470 --> 00:01:44,940 That means that we need to somehow pull data out of the euro. 25 00:01:44,970 --> 00:01:51,300 We need to somehow say like OK go into a u r l and get this number 5 right here because that is a very 26 00:01:51,300 --> 00:01:53,640 particular post that we want to show to the user. 27 00:01:53,790 --> 00:01:59,390 We want to make a request to our back end API and make sure that we get specifically post number five 28 00:01:59,380 --> 00:02:00,590 . 29 00:02:01,230 --> 00:02:08,370 So to read this ID out of your L we will define it as part of our path right here as what will called 30 00:02:08,460 --> 00:02:13,560 a parameter or parameter for short as our path. 31 00:02:13,560 --> 00:02:18,540 I'm going to go ahead and write posts slash and then a colon ID. 32 00:02:19,050 --> 00:02:22,390 So this colon ID part is the real magic here is the special part. 33 00:02:22,410 --> 00:02:24,370 This is the program. 34 00:02:24,750 --> 00:02:33,900 If a user navigates to post slash five the five would match up with this colon ID token right here. 35 00:02:34,230 --> 00:02:41,090 Re-act router automatically parse that you are l and it will pass into our post show component. 36 00:02:41,310 --> 00:02:47,340 A special prop this start props harams dot ID. 37 00:02:47,610 --> 00:02:55,130 So just because the words are confusing this stop prop's start Parama start ID. 38 00:02:55,230 --> 00:03:00,700 So this is done by re-act router for us programs says specifically. 39 00:03:00,750 --> 00:03:06,550 It's a parameter and the U are L and then because we name the parameter ID. 40 00:03:06,750 --> 00:03:09,140 We'll get it as Dot ID right here. 41 00:03:09,150 --> 00:03:13,380 This could have been like you no post ID or something like that. 42 00:03:13,440 --> 00:03:18,940 In which case this would have been close to ID like so it's a one to one mapping between the two but 43 00:03:18,980 --> 00:03:19,800 we definitely want to go. 44 00:03:19,800 --> 00:03:23,280 Just keep it simple with ID right there. 45 00:03:24,330 --> 00:03:28,860 OK so that's basically the functionality that we're going to use to pull the idea of the posts that 46 00:03:28,860 --> 00:03:31,490 we want to see out of the Eurail. 47 00:03:31,530 --> 00:03:35,330 So let's go ahead now and create our post show component. 48 00:03:35,640 --> 00:03:45,750 So in our component's directory you posts show that J us and we'll just scaffold to sing out as usual 49 00:03:46,390 --> 00:03:46,880 . 50 00:03:46,970 --> 00:04:03,120 Import react and component from re-act class posts show extends component that was going in and render 51 00:04:03,780 --> 00:04:12,770 return div show Post and let's make sure that that parameter thing is working correctly so will do. 52 00:04:12,960 --> 00:04:22,090 Curly braces with this stock prop's dot Puranas dot ID just to make sure it's working correctly. 53 00:04:22,110 --> 00:04:30,840 The bottom line you export default posts show and then don't forget we do need to require this back 54 00:04:30,840 --> 00:04:40,650 into our route's file because we're making use of it right here so we'll do import posts show from component's 55 00:04:42,450 --> 00:04:43,680 posts show. 56 00:04:43,890 --> 00:04:44,570 Again. 57 00:04:44,580 --> 00:04:48,840 Don't forget posts with an s show. 58 00:04:48,930 --> 00:04:52,770 If you want to drop it off just be consistent. 59 00:04:52,770 --> 00:04:59,520 All right so let's give this a shot in the browser and I refresh the page and then we will manually 60 00:04:59,700 --> 00:05:06,090 navigate to posts slash 5 and you'll see that we got the text here. 61 00:05:06,090 --> 00:05:13,670 Show post 5 where I can do 500 show post 500 where I get new posts 5. 62 00:05:13,760 --> 00:05:17,040 A lot like so perfect. 63 00:05:17,040 --> 00:05:22,800 So again we're going to use this parameter right here as a means of making sure that we fetch the correct 64 00:05:22,890 --> 00:05:25,640 ID to fetch the correct post to show in here. 65 00:05:25,650 --> 00:05:27,840 That's the intent. 66 00:05:27,840 --> 00:05:30,400 OK so now we know what are your L's going to look like. 67 00:05:30,600 --> 00:05:40,560 Let's go back to our post index page and implement the index or the link to our individual post show 68 00:05:40,560 --> 00:05:43,920 view. 69 00:05:43,920 --> 00:05:53,250 So inside of our post index component right here we've already got our link at the top so I'm going 70 00:05:53,250 --> 00:05:56,370 to just wrap the text inside of each ally 71 00:05:59,460 --> 00:06:00,150 with a link 72 00:06:05,940 --> 00:06:09,630 and then we'll see that when you click on this link you will go to 73 00:06:12,720 --> 00:06:17,550 posts plus post dot ID. 74 00:06:17,700 --> 00:06:23,000 So remember we're making one live for each post and our I versus me. 75 00:06:23,000 --> 00:06:28,900 The post has its own ID for each iteration of the loop so we can just say post slash. 76 00:06:28,920 --> 00:06:35,350 Post ID and we'll get like you know post slash one posts last slash 3 et cetera et cetera. 77 00:06:35,460 --> 00:06:38,930 So let's good and save this refresh. 78 00:06:39,270 --> 00:06:40,320 And there we go. 79 00:06:40,320 --> 00:06:41,500 Now we've got links. 80 00:06:41,580 --> 00:06:52,320 If I click on this one I go to post 63 because I just clicked on the post with ID's 63 or 62 61 60 and 81 00:06:52,320 --> 00:06:54,160 so on. 82 00:06:54,170 --> 00:06:54,550 Cool. 83 00:06:54,570 --> 00:06:56,350 That's exactly what we need here. 84 00:06:56,400 --> 00:07:03,060 Now all we got to do in the next section is make sure that when we load up this post shows you we successfully 85 00:07:03,270 --> 00:07:07,290 load the post with IDS 63 so we can get its content. 86 00:07:07,680 --> 00:07:09,110 I'll catch you in the next section.