Check out a free preview of the full Complete Introduction to React (feat. Redux and React Router) course:
The "Linking to the Details Page" Lesson is part of the full, Complete Introduction to React (feat. Redux and React Router) course featured in this preview video. Here's what you'd learn in this lesson:

Clicking on a show still does not display the details for that show. To fix this, Brian goes into the ShowCard component and wraps all the content in a React Link component to take the user to the details page.

Get Unlimited Access Now

Transcript from the "Linking to the Details Page" Lesson

[00:00:00]
>> [MUSIC]

[00:00:04]
>> Brian: Let's go make our links work because that really bothers me. So go in here to, let's do store.jsx. No, not store. It's in search.
>> Speaker 2: Is that in show card?
>> Brian: It's in show card. Yep.
>> Brian: So we're going to pull in a link here from React router.

[00:00:39]
>> Brian: And, that's so funny, where did I do that?
>> Brian: And I wanna say it's, again this off with the memory so,
>> Brian: We're gonna go to
>> Brian: Details. Actually let's do this like this.
>> Brian: details/imdbID, so props.imdb.ID. You can also do .ID as well, it will be props.params.id as well.

[00:01:26] Let's go and do it like that though, I like that better.
>> Brian: And make sure that works also I'll have to go look it up.
>> Brian: This is also gonna be a string and it also isRequired.
>> Brian: Let me check real quick, make sure everything didn't break.
>> Brian: Did break, that's not good.

[00:02:04]
>> Brian: I think I need a leading slash too. Leading slash right there.
>> Brian: So try that again. Okay, now it works. Okay, so now each one of these is a link, if you click on the right one, it will take you to the right page. So, to recap what I did there, brought in link right there.

[00:02:30] And here, I just wrapped everything in a link to details, props.imdbID. And just wrapped it all on the link. And I also added two new things to, actually one new thing to the prop types, that's it.
>> Brian: And I'll cut a branch after this.
>> Speaker 2: One question, how would you handle clearing the search term when returning to the landing page after a search?

[00:03:01] There's kinda wondering what's the best place for that action.
>> Brian: Like where is the best place to fire the action? I guess I'll answer both questions.
>> Speaker 2: Best place for the action to live.
>> Brian: So you can you one or two things. I'm a fan of making a clear state action so you just fire off an action that says clear my search term and then anyone can fire blindly doesn't have to have like cuz you can also just say set search term to be empty string and that's fine too.

[00:03:34] I guess either way I can see reasons you don't use either one of those.
>> Brian: Where the place to do it.
>> Brian: So,
>> Brian: Clear the searchable returning to landing after a search. I probably do it on component will unmount, which we'll talk about that March towards the end of the class.

[00:03:57] But there's basically, when you're component is leaving the page, you can have it do certain actions using what's called the life cyclemethod and that particular part of the lifecycle is called component will unmount. Basically, I'm about to leave the page, you can just fire off an event that says clean my search term, that would work too.

[00:04:17] With React router, remember we did onEnter. There's also an onExit as well, and that would also be an okay place for that to live. In this particular case, I'd probably choose onExit cuz it seems to really relate more to routing than it does to component unmounting. That's a judgment call though.

[00:04:37] I don't know if there's a right answer there.