The last two things that we have to do inside of this component right here is to make sure that the
user has a button to press to delete the post.
And we also need to make sure that there is a button that they can click to navigate back to the big
list of posts.
So many something up top that just says hey take me back to the index and something that says I want
to delete this post.
So we've definitely taken care of that navigation side of things before.
By using the link tag from re-act router.
So it's definitely easy one.
Let's start off with that at the top of our file will import the link tag from re-act Rotterdam.
So important link from re-act router.
Dong that inside of our render function will place a linked tag will tell it to render the user or something
redirect the user back to the root route of our application.
I will give it the text or something like back to index.
Now I'm going to not going to put a class name of button on this one because I'm OK with it just being
rendered as plain text.
But if you want to you can definitely put on a class name of DTN and DTN primary to make this look like
a nice button.
So let's refresh in the browser now and be at the nice back to index linked up here.
OK.
So that's definitely working pretty well on that side of things.
Now I know that I said that will also take care of delete inside this section but it just occurred to
me that if we go back to the index page we don't really have the ability to navigate back to an individual
post.
So maybe before we take care of any of that deletion stuff let's make sure that a user has the ability
to navigate from clicking right here and going to the show page for each in particular or each particular
post.
So to take care of that.
Yup.
We're going to use the link tag again inside of our post index component.
Back inside of our code editor I'll find the Post's index component we've already imported the link
tag in here up at the top.
So all we really need to do is wrap the post title inside of the render post function with another link
tag.
So let's say link.
We're going to give myself a little bit of space to work with here and we'll send the user to.
Now this is going to be a little bit more complicated in the past.
We always hardcoded the route that we wanted to send the user to but this time around we want to send
the user to a route that includes this particular post ID so we can form up a template string that will
essentially take us to the right route will place our back to X and we'll say slash posts slash and
then the ID of the post.
So Post dot ID.
All right.
Let's test this out inside the browser now.
I'll refresh the document.
And now everything appears to be clickable.
I can go over here.
Yup looks good looks good.
Fantastic.
Now something I want you to notice really quick if I refreshed the page it can be very subtle very hard
to see.
We have already fetched the entire list of posts so we've already got everything but our individual
posts show page will also attempt to refed That's the post as well.
So when I click on this link right here we're going to instantly see some content on the screen but
we will also see an additional request down here to fetch that extra post or prefetch the post.
So we were kind of fetching every record twice inside of our application once for the index page and
then once for the show page.
Now for me personally that is how I always construct pages I always assume that we're working with stale
data because you never know how long a user has been sitting at this index page.
And so I always want to make sure that I re-offense records whenever I go to the show page.
If you're working on an application however where you are really really really concerned about network
usage you can always add a check inside of the post-show component.
So it's fine.
Here's the component did mount right here.
So if you did not want to eagerly refresh posts you can always wrap this thing with an if statement
and said if this dot Propst post.
So if we already have a post or if not there we go.
So if we already have a post do not attempt to re fetch it but if we don't have one then great.
Go and try to grab the thing.
So I just wanted to throw that out there that that is always an option to do if you really care about
that side of things.
With that in mind I also want to try to go into an individual post show page and I'm going to refresh
the page.
And yes perfect.
We do see the post immediately appear on the screen and we only fetch the data required for showing
this particular page.
Now another very interesting thing that one should take note of right now are Post piece of state contains
only the post with the idea of 7 9 6 2 6.
If I click back to index right here you're going to see only this post appear on the screen and then
once the index request completes as well you'll see all the other posts appear as well.
So watch very carefully.
So there's the I mean is very brief but the very top was the single post by itself and then we saw this
index route request to the API are complete and then all the other posts appeared as well.
Now of course that only happens one time inside of our application.
Once all the data has been fetched we are refreshing data but the page is being rerun dered with the
old data that we had previously anyways.
So this is a very nice approach because your user instantly sees content appear on the screen but if
any of the records has updated since they last attempted to get one the once the request completes for
that update they'll see the new content appear on the screen.
So very good a very solid approach going this way.
OK.
So a little bit of a quick aside there.
Let's get back on track in the next section and make sure that our users have the ability to delete
a very particular post.