Complete React Tutorial (& Redux) #31 - Route Parameters (part 2)

Key Takeaways

alright then so we've set up a route for the individual post page and we've set up our route parameter right here so it identifies what variable content we're putting into the route and it grabs that and displays it on the page now ideally what we want to do is from the home page link up these different titles right here so that if we click on them it takes us to that individual post page and it shows us that individual post the content of it so how are we going to do that well it's pretty simple what we need to do is surround the title right here with a link tag and that is going to link us to that separate component now in the two property we need to pass through as a route parameter the ID of each one of these individual posts and we have access to those IDs because we output the ID into the key right here well we said poster ID so all we need to do is surround this thing right here with a link tag and in the to property of that link tag we need to say forward slash and then the post ID so let's do that first of all we need to import the link tag from the reactor router package so let's do that first of all imports link from react router done okay so now we can use it down here so surrounding the span we'll do a link tag and we'll come back to the - in a second so let's close that off like so now that the two is gonna be equal to something dynamic because we're gonna dynamically input the post ID so we'll do our curly braces first instead of just putting everything inside a string we can't hard code a string here like this and say post our ID because it will take this literally to mean the string poster ID we don't want that instead we want to combine two things first of all we'll combine the forward slash which is a string we'll concatenate that with the post dots ID so the result here is going to be something like forward slash 1 2 3 4 makes sense ok so we have that Lync sorted now and if we save this and go to the browser to test it out now we can see they've changed color that's just the default styles because links are blue some reason so if we click on one of these we can see at the top we get that ID and its output to the component and if we click on a different one it's a different ID so now we're linking those up to that component this is all fine but inside the post component right here what we want to do instead of just showing this ID on the screen we actually want to go out and grab that individual post data and we'll do that from Jason placeholder much like we grabbed all of the posts right here we're gonna do the same thing but this time grab an individual post makes sense cool so inside that post is this is where we're going to do it just after we do this thing right here we're going to make that request so since we're making a request and we're going to use Axios we need to import that first of all so import Axios from Axios all right and then underneath this dude we need to say Axios gets then we're going to paste in this URL to go out and get the posts but then at the end we want to add on the ID that we grabbed from the route right here so we can type that on so this right here performs a request to forward slash posts forward slash one two three or five or seven or whatever the ideas and when we make that request to JSON placeholder it's gonna send back a JSON object for that one individual post so then we no longer need to really store the ID in the state and instead what I'd like to do is store the individual posts that we get back now it's going to be not to begin with but once we've made this request we can tack on a dot then method and update the state because we receive the response and we can use that inside the callback function right here this is much like we did before when we received all of the posts so let's delete that we don't need that one down there anymore but when this is complete then we want to update the state to add the post that we get back from this into the state so we'll say this dot set state and then we want to set the post property and it's going to be equal to the response data remember all of the data we get back from the response is on the data property right there so then now we have them let's also just log out so we can see what it looks like the response console.log responds okay we no longer want to output this stuff here anymore so let's delete that and save it and just check this out in the browser so if we click on one of these then we can see the response data right there and we can see inside the data property we have a body an ID a title a user ID etc so now let's output a bit of that information inside this component so let's get rid of that and down here inside the template this is where we want to output the post now first of all we need to create some JSX for that post and we need to even check whether that post exists yet and to do that we'll use a ternary operator again so we'll say Const post is equal to this dot state dot post question mark so if this is true if we have a post in the state and we've set it after this request as we made then this right here this will be true if we don't have a post yet and this has not been made this request it's going to be null and fall C so we'll return something else so the first thing is going to be for the case of true then false at the end so let's do the false case first of all what do we want to output well we'll just do a div and give that a class of center it's essentially a wine the post then will say something like loading post doc all right there so if we have a post then we'd like to return a large bit of JSX and output the post details so let's create a div first of all and give this a class of post and then after that we'll do a h4 and this will have a class off-center and inside that will output the title so we'll say this dot state the post dot title all right so below the h4 will output the content so we'll say P and then inside this dot state dot post dot body all right so out putting that there and now we want to output the post whatever it is right here so if we have a post then it's going to be this if we don't have a post then it will be this so let's save that and check it out in a browser over here and now we can see the title and the content and if we go home and click on a different one then we get that post right there etc all right so this my friends is now all working but I'd like to show you one thing what if we go to the contact page then we get the contact component but we also get this component right here and that's because it's treating this is the same URL as our post page if you remember inside our app component we set up the URL to be forward slash colon and then post ID so whatever we put after the forward slash it would treat as a post ID so what's to say it shouldn't treat this as a post ID right here so we need to address this issue of showing this thing right here for the contact page and the about page in the next video