Utilizing the Link Component in React Router Dom
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

[00:00:00] Hi welcome back to the reactor building out in the sky. We are going to set up the media tag with react Ramadans so we can navigate to our digital component on our newsletters will slash news or slash detail slash fancy ID and see this and this and then fetch the content with that corresponds with the passing. So let's go ahead and get into that. I'm going to first go back to newsletter in here and then I'm going to get to my code and we have a set up. We just need to pass and I.D. and then I'm going to head over to let's see newsletter archive. This is where we want to place the link tag because we want to place in honor items. So first it's important. What's the import link from react router Dom and then on each of these link items. We need a tag but we don't want the entire we kind of was Nineham. We want a just long time. So we think and then we want to close it off over here and we need to give it a. So say OK now we get to slash newsletter slash the detail and then we need to provide it with a with an ID. So we could just say Okay 2 3 5 great networks. We love the page we click on it except that's going to make every router do that. Remember we could get many of these. Also known as we have a problem with it rendering which will sling around let's just get down what we're focusing on right now. So we think newsletter detail in the 80s. [00:01:34][93.8]
[00:01:35] We also notice we don't want to say Id when it has a Colan has a column in front of it that means it's a parameter that we need to provide. So let's go back to news that I have and then I'm saying today instead of saying to 343 or whatever I wrote let's go and make this a let's do some string interpellation here and was out in some techs and was put in the item indictee and you'll remember that in our list of items that we fetch the chairman of the property. Now you might notice that there is a underscore here sloshy you have to reference it with that. So let's go back to our app here and instancing died. You'll notice if you go to the browser right now it crashes because it doesn't have an item. There's no I.D. on item like that we to provide the underscore can head back to the app and whenever we click on it link it goes to that unique item. So I'm going to copy this just so we can compare it to the other item and then I'm going to reload this jostles nowheres and I'm going to click on the other one. And I'm going to paste it in here just to show you that it's different. Notice it's slightly different. And I just wanted to show you that so you know that it's Pruit. It's getting that very unique we very Gedye. And the reason that's important is because then in the next guide we can connect our state to our newsletter detail and then we can just filter over. [00:03:06][91.1]
[00:03:07] We can say okay let's filter over our items and select the right one. That way we don't have to pass the item over the limit. We can just use the ID and get the correct item that's a lot. It's a lot better. And now way our data is secure so let's go ahead and do that in the next guy. Let's just say it's status. Get out get commit and let's say how did it link. And I didn't think it should be active router link to each list item. OK let's go ahead and hop into the next guy where we will actually fetch the item and display something on the screen. I'll see you then. [00:03:07][0.0]
[184.9]