Now that we have the ability to create new posts we'll start working on the last page inside of our
application.
The posts show component the purpose of this component is to show details about a very particular post
on the screen and the user should also have the ability to delete a post from here as well.
I think that overall this new route is going to be pretty straightforward.
I think that the only tough thing about it is figuring out how we're going to fetch a very particular
post.
So remember we want to find for example here the post with I-85.
So that's probably going to be the only big challenge I expect to see.
So without further ado let's just go ahead and get to it.
Going to change back over to my code editor and I think we'll start off by putting together some scaffolding
for our new component.
So in my components directory I'll make a new file called posts show us.
And then inside of here we'll put some of our usual boilerplate XML import react and component from
re-act will create the posts show which will extend the component base class we'll put in a little bit
of boilerplate for the render method.
For right now just a div that says Post show is appropriate and at the bottom we can say export default
posts show.
OK so this is looking like a good start.
Now to make sure that we can navigate to this page inside of our application will flip back over to
our top level index start J.S. filed and add this to a new route component.
So let's go back to index start yes inside of here.
I will import the component we just create it.
So the posts show from components post show and then we'll add in an additional route.
Now I do recall that the order in which we define our routes makes a big difference here.
If we define routes in an incorrect order we might match an incorrect route and we'll get the incorrect
component to appear on the screen.
So in this case we want to make sure that we add this new route between the two existing ones.
So inside of here we'll say route it will give it a path of posts slash colon ID
posts show it's
aerial remember that the colon ID right here is a wild card of sorts.
So re-act routers going to try to take whatever is in that little position you are l and pass it as
a property or a prop to our post show components.
We wanted to make sure that this was specifically the second route inside of our application because
if it was the first one if the user tried to navigate to posts slash knew slash knew would be in or
would be taken as the wildcard token.
And so this route would match post-New if it was first.
So thats why we want to make sure that it is the second one inside of our application.
All right.
So let's test this out and see how we're doing.
I'm going to save the file I'm going to refresh our application inside the browser and I'm going to
manually navigate to posts and then we can go to essentially anything.
Say 1 2 3 right now.
So I go to 1 2 3.
We correctly see posts show on the screen and if we go to slash new we still see the new form on the
screen.
OK.
So this is looking like a good start.
Let's continue with our application inside the next section.