Check out a free preview of the full Complete Introduction to React (feat. Redux and React Router) course:
The "Routing Questions" 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:

Before moving on, Brian spends a few minutes fixing a couple of linting errors in the application. He also answers a number of audience questions about functional programming techniques, declaring propTypes, and the way the routes are functioning.

Get Unlimited Access Now

Transcript from the "Routing Questions" Lesson

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

[00:00:04]
>> Brian: So let's go back to details and let's actually do this pretty code thing again because I want to see if it's actually working the way we intended.
>> Brian: And I'm going to put also a style here as well.
>> Brian: And here I'm just gonna do a JSON.stringify(this.props.params), you can do this up props as well if you want to.

[00:00:33] I'm just gonna go look at the params, okay?
>> Brian: Let's save
>> Brian: And refresh this. Make sure there are not, yeah, you're gonna get some validation errors. I'll fix these ones here in just a sec.
>> Brian: And we wanna go into details real quick.
>> Brian: So it's actually not gonna work, so we don't have, details did not match any route cuz it shouldn't match any route.

[00:01:16] So, if they enter something that's wrong, like 1, 2, 3, right? This actually should redirect us to the home page, which it did, which is nice. That's exactly what it should do cuz we use the replace method. Let's go grab an imdb out of our data.json, so any one of them will work.

[00:01:31] It should look like this, tt1856010, scrub House of Cards, because it's like my favorite show. My gosh, details/blah, right? Whatever your IMDB ID is, and looks like we're still not seeing what we're supposed to. Now, why is that?
>> Brian: I wonder if that's redirecting, I want to start finding.

[00:02:14] Let's start on finding it, so let's go introspect what's going on here, introspect inspect. You can also do introspection at this point, if you'd like to question all your life decisions.
>> Brian: All right, so I'm just gonna do some good old-fashioned console logging.
>> Brian: And show or write,

[00:02:53]
>> Brian: and let's see what this yields for us. To get in some areas, that's fine, we'll fix that momentarily. So, saying details slash, Our IMDb ID. All right, so let's take a look at we've got here. So here's my issue. I wasn't looking at params, which is what I needed to do.

[00:03:25] So, this actually used to be next state.params.id
>> Brian: Okay, so let's save that. I'm still getting a bunch of errors, whatever.
>> Brian: Let's refresh here, try this again. Slash that. And now we actually are matching a route. Because this was kind of hairy, I'll push a branch right after we answer answer some questions here.

[00:04:04] Are some people seeing this? Okay, awesome. Any questions about what's going on here? Hopefully that was a useful little debugging session for you, as well, to see how Oftentimes up that cancel like just cancel light me out usually helps me a lot.
>> Brian: Then you can see that it's also getting matching the right object as well.

[00:04:36]
>> Brian: Cool.
>> Speaker 2: Is there a reason why you're mutating That object instead of returning a new one on Object.assign, or assignShow.
>> Brian: I don't really have a favorite. I mean, you could totally do this.
>> Brian: I like the sensibility. Like I would love to encourage you to do that.

[00:05:01]
>> Brian: Totally works too So x is really terrible name.
>> Brian: Functional programming for the win. No wait. No. hold on. The reason why we're not doing that is I guess we could do. You have to be a little bit more clever in the way you do it because you have to preserve everything that's coming in from newState as well.

[00:05:29] So I'm gonna not do that right now. The reason why I just mutated it is cuz nothing else is looking at it. Famous last words I know, right? Like You typically want to be as non mutating as possible but this has yet to by the in the but as you can see I'm a very reactionary person to bugs as I try to I try to ignore everything bad in the universe until it happens to me and then I panic.

[00:05:58] It's just my general like life Lifestyle in general. So, yeah.
>> Brian: But if you feel this app up to it, go ahead and do all the gymnastics to get that to be More of a functional style. Any questions? All right, let's kind of branch and push this up.

[00:06:24] Let's first fix our linting errors and then I'll push up. There should be no spaces in the parens, line twelve. Yeah. This is one of things I don't like about. I like putting spaces here.
>> Brian: I like putting the spaces between parenthesis that don't relate to each other so it's easier for me to parse visually.

[00:06:46] However standard does not like that.
>> Brian: It's not gonna say anything because I didn't change anything. All right, so let's go to details such as X and fix that as well.
>> Brian: So this is an ES6 type component, so we have to do prop types underneath it, details.prop.

[00:07:07] Sorry, lowercase propTypes is an object. Here, we're gonna say const We were just looking at parameters, so I want to say { object } = React.PropTypes. And then we're going to say params: object.
>> Brian: Great.
>> Brian: And that should now, yeah, we fixed all of our bugs or all of our errors.

[00:07:58]
>> Brian: Okay.
>> Speaker 2: This is how you allot React, now that you're expecting a params as an object, okay.
>> Brian: You could also do isRequired here. I'd feel okay about that, because if Details is It's not going to work very well but you can also pretty well depend that react router is always going to pass a params, but actually I could see this being useful in a case if you had a coworker that saw this component as like, I should include this in my route.

[00:08:22] They would very quickly find out that this is actually a React router route and if you try to include this somewhere else it's going to be really difficult to emulate what's going on here. Yeah.
>> Speaker 2: Os it possible to do prop type says a static property of the details class or is that different than what you did?

[00:08:42]
>> Brian: Yeah Film or time.
>> Speaker 2: Is it impossible to do prop tapes as a static property on the details class?
>> Brian: This is how you do it. For your six type classes there is a proposal. I want to say at stage one or stage is zero said to have statics or something like that.

[00:09:02] I don't know if it's called statics but it's something to this effect. This isn't work right now with yes six classes this would be something like yes twenty seventeen or yes twenty eighteen that this will land So in other words that this is impossible right now as far as I know personally.

[00:09:22] Well, it's not standard behavior. You can get a bell transform that does make this work but I choose to Personally not used proposals until there at least stage two. In stage two just means like this is like 95% definitely gonna make it into a standard JavaScript. When it's stage zero or stage one, there's a maybe like 20% or 30% chances it's gonna make it in standard host script and like for me That would be awful that I have to go refactor code just because I wrote it in a non standard style and that fell out of favor, right?

[00:10:03]
>> Speaker 2: There's a couple quick questions about the client app, if you go back to that.
>> Brian: Yeah.
>> Speaker 2: In our assigned show function when we're using on enter. Our next day and replace the two arguments that are going to be passed through any time we're using on enter.

[00:10:19]
>> Brian: Yeah.
>> Speaker 2: Okay, And then can you when you're using replace does next state get passed in with Replace?
>> Brian: I don't know. I don't have a good answer for that. I'd say look at the react rather docs. Because that's exactly what I would do you might be able to ask pass parameters you mean that would make sense that you should be able to pass parameters to the next route but I haven't done that so I don't know.

[00:10:50]
>> Speaker 2: I'm story if you cover that but it came up. Can you explain again why it's an improper types can coincide the ES6 class Did you cover that?
>> Brian: The answer to that is it just doesn't. [LAUGH] There's no better answer. That's just not part of the spec.

[00:11:06] If we go back to, where was I, details? This is just the way that you have to do it. It's ugly, right? This is also the way you have to do it for stateless functional components.
>> Brian: Yeah there's just no concept of like statics right now on a on the Essex class.

[00:11:26] You can go read the Essex discuss on why they didn't do it that way. I don't particular recall top of my head.
>> Speaker 2: Can you step through the sign show function starting at the on the enter. From the details route, can you go through that again?
>> Brian: Sure.

[00:11:46] Gladly. Okay, so, step one is we're going to match this route. So okay I found this route Instead going to call it's onEnter function which is going to call here to assign show react router is going to pass the next day which is the parameters being passed down.

[00:12:10] Ooh it's not the parameters it's the properties that's the more accurate thing to say is the properties being passed down. Yeah, I mean you could probably even go as far to call this next props. I think it's called next day in the docs. So I just stick to what the docs say.

[00:12:29] Okay here we're filtering out everything that does not match the ID. So hopefully we're gonna find one show that matches the IMDB ID. The ID being passed in. let's get this console log. Then we have the show race symbol hopefully it'll be an array of one thing if we don't find anything that matches up We're gonna to redirect them to the home page so we don't crash in the details page.

[00:12:55] That's the idea there. Here we're just making sure that our showArray shows up into the next state, and we return that which is then going to get passed down to the This route down here, which we can then refer to here inside of Details. That's the exhaustive steps of what's happening with react-router.