So we've got our list of posts here. 2
We just need to declare a new route that users can go to whenever they click a post to make that happen 3
. 4
We'll go ahead and declare a new route inside of our routes file. 5
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
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
and we'll get back to the path in just a second. 8
And then in component posts show and so will create a post show here momentarily I'll mention it several 9
times. 10
Notice how we've got two s's in a row so it's posts show. 11
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
it to post show. 13
Totally fine go for it. 14
Just make sure you stay consistent all the way through. 15
OK so we do need a path for this but this is give me kind of like a little bit interesting right here 16
. 17
Let's flip back over to our Mark really quick and look at the show detail page. 18
Notice how the route is PPO's slash 5 to 5. 19
Here is intended to be the ID of the post so the intent behind this. 20
You are right here is that a user should be able to save or bookmark this you or L navigate back to 21
it. 22
And always expect to see the exact same post show up on the screen right. 23
I want to make sure that we fetch Post Number 5 whenever they come to this page right here. 24
That means that we need to somehow pull data out of the euro. 25
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
particular post that we want to show to the user. 27
We want to make a request to our back end API and make sure that we get specifically post number five 28
. 29
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
a parameter or parameter for short as our path. 31
I'm going to go ahead and write posts slash and then a colon ID. 32
So this colon ID part is the real magic here is the special part. 33
This is the program. 34
If a user navigates to post slash five the five would match up with this colon ID token right here. 35
Re-act router automatically parse that you are l and it will pass into our post show component. 36
A special prop this start props harams dot ID. 37
So just because the words are confusing this stop prop's start Parama start ID. 38
So this is done by re-act router for us programs says specifically. 39
It's a parameter and the U are L and then because we name the parameter ID. 40
We'll get it as Dot ID right here. 41
This could have been like you no post ID or something like that. 42
In which case this would have been close to ID like so it's a one to one mapping between the two but 43
we definitely want to go. 44
Just keep it simple with ID right there. 45
OK so that's basically the functionality that we're going to use to pull the idea of the posts that 46
we want to see out of the Eurail. 47
So let's go ahead now and create our post show component. 48
So in our component's directory you posts show that J us and we'll just scaffold to sing out as usual 49
. 50
Import react and component from re-act class posts show extends component that was going in and render 51
return div show Post and let's make sure that that parameter thing is working correctly so will do. 52
Curly braces with this stock prop's dot Puranas dot ID just to make sure it's working correctly. 53
The bottom line you export default posts show and then don't forget we do need to require this back 54
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
posts show. 56
Again. 57
Don't forget posts with an s show. 58
If you want to drop it off just be consistent. 59
All right so let's give this a shot in the browser and I refresh the page and then we will manually 60
navigate to posts slash 5 and you'll see that we got the text here. 61
Show post 5 where I can do 500 show post 500 where I get new posts 5. 62
A lot like so perfect. 63
So again we're going to use this parameter right here as a means of making sure that we fetch the correct 64
ID to fetch the correct post to show in here. 65
That's the intent. 66
OK so now we know what are your L's going to look like. 67
Let's go back to our post index page and implement the index or the link to our individual post show 68
view. 69
So inside of our post index component right here we've already got our link at the top so I'm going 70
to just wrap the text inside of each ally 71
with a link 72
and then we'll see that when you click on this link you will go to 73
posts plus post dot ID. 74
So remember we're making one live for each post and our I versus me. 75
The post has its own ID for each iteration of the loop so we can just say post slash. 76
Post ID and we'll get like you know post slash one posts last slash 3 et cetera et cetera. 77
So let's good and save this refresh. 78
And there we go. 79
Now we've got links. 80
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
so on. 82
Cool. 83
That's exactly what we need here. 84
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
load the post with IDS 63 so we can get its content. 86
I'll catch you in the next section.