This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Routing with Reach Router Link" Lesson
[00:00:00]
>> Brian Holt: So let's go to pet.js, and let's make each individual pet page link to their details page for that particular pet.
>> Brian Holt: So,
>> Brian Holt: I want you to change this div right here and the wrapping div to be a link. And then I'm gonna do the auto import up here.
[00:00:31]
>> Brian Holt: But if you look up here, it imported link at the top for me.
>> Brian Holt: So the only thing I did here was import link at the top. And I changed the wrapping div from link,
>> Brian Holt: To div and the only thing I have to add is to = ['/details/$(id)'], you know, the template string thing.
[00:01:12]
>> Brian Holt: I have to pull ID up here I guess as well.
>> Brian Holt: So I pulled id out of this.props right here on line 6.
>> Brian Holt: Here I changed the online 15, I changed the div to a link. I put in a to to the curly brace then a back tick to do a template string, right?
[00:01:41] To /details and then ${id}.
>> Brian Holt: So now each one of these is going to be a link to a details page for that particular animal.
>> Brian Holt: So link comes from Reach router. It ends up being an A tag, which is good, right, because if it's an A tag it's very accessible.
[00:02:09] People can Cmd+click on it and it opens a new tab. All the good things that come with being a real anchor tag. Reach router does this on purpose to force you to use anchor tags because links should always be anchor tags. It's just the correct way of doing it.
[00:02:25]
>> Speaker 2: When you clicked on it, it said undefined in the browser.
>> Brian Holt: Yeah, you're right.
>> Brian Holt: You have to pass it in here as well. Do I not have, I do, I just didn't say that. So down here, you have to say id = [pet.id]. And I know someone's gonna ask, can't you just use key?
[00:02:48] React does not actually pass the key, so don't use key.
>> Brian Holt: So yes, thank you. Now, if you look here, you'll see down at the bottom, it is actually a real ID. Thank you.
>> Brian Holt: Okay, last thing let's make this adopt me header clickable as well, so that it goes back to the home page.
[00:03:25] People expect that if you click the brand that it goes back to the home page. So let's go to app.js and surround the h1 with a link to "/" and then put the adopt me inside of it.
>> Brian Holt: It's gonna say, hey I don't know what that is.
[00:03:50] So you can just pull that in from,
>> Brian Holt: There we go.
>> Brian Holt: So import link as well from reach/router.
>> Brian Holt: And again, if I would go and refresh. Now we can click on it. And it will take us back to the home page.
>> Brian Holt: Except that's not how I wanted to do it, sorry.
[00:04:35] So delete the h1 around it and put this inside of a header. This will just get the styling correct for my CSS, there's no reason you have to do it this way. Like that.
>> Brian Holt: So I have a header. And then here, I put a link to, and then delete the h1.
[00:05:02]
>> Brian Holt: And I think that will fix all the, yeah, now it has a nice styling.
>> Brian Holt: That my wife pointed out to me is McDonald's colors, way after I was done with it.