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

Brian creates the Details component which will show detailed information about a show. The details component will know which show to display based on data in the URL. This leads Brian to introduce URL parameters and demonstrate how to specify the parameters in the React Router.

Get Unlimited Access Now

Transcript from the "URL Parameters" Lesson

[00:00:00]
>> Brian Holt: Welcome back to day two of complete intro to react. Hopefully melted your minds a little bit more, but today is full of more of the fun stuff. We did kind of more the basic building blocks of React, the basic tooling around it, and now we get to go off and do some of the more crazy fun things.

[00:00:19] And I'm just gonna kinda give you some highlight reels of, like, some of my favorite things to do with React, but obviously, like when we give you interesting new primitives to build interesting things with, I mean, the world is your oyster. [LAUGH] Yeah, it's only your imagination that limits you.

[00:00:38] Before we get started, does anyone have any questions they wanted to pose before we kept going?
>> Brian Holt: As a reminder we're on V2-12. And I'll keep pushing branches throughout today. So as you can see here, I have our class page up. That's nho.lt/react, if you don't have the link.

[00:01:05] And we're about half way down the page, little over half. And we're gonna start with data in React.
>> Brian Holt: So we had just finished up kind of the unit testing part. We just finished up our little note on Hot Module Reload, and we're gonna go back and start working some more in React, and we're gonna add another route today, our last route, which is going to be kinda like the details you can zoom in like in YouTube trailers you can get a synopsis.

[00:01:38] Let's go back to the window. Create a new file called details.js I'm wanna put that instead of JS and save,
>> Brian Holt: And here we're gonna say import React from react,
>> Brian Holt: Const Details
>> Brian Holt: Equals react.create class,
>> Brian Holt: Render,
>> Brian Holt: Return,
>> Brian Holt: And whatever you wanna put here.
>> Brian Holt: And export default details.

[00:02:43]
>> Brian Holt: Now, come back over to clientapp.js.
>> Brian Holt: And we're just gonna make a new route here. So we're gonna import details up here, import details from ./details.
>> Brian Holt: And make a new match component down here, match pattern = /details/:id component =details. So this :id I imagine that for many of you that have written service head apps looks mildly familiar.

[00:03:31] But if it's not basically you're saying, I'm wanna route that, I'm gonna have the details, particular path. And then, whatever comes after that is going to be the ID of whatever you're looking for. So if you have like just in this particular case we have our movies. So that ID is going to correspond to whatever movie we're looking at.

[00:03:55] So that details parameter is going to be passed to our route and we can select the correct movie to show them. That make sense? Cool. This is a very common pattern this is how you do it with Django. It's how you do it with a bunch of different server side routing.

[00:04:07] So they kinda just don't let the flow in that.
>> Brian Holt: Cool. So let's just go make sure that works. So save that. Make sure your dev serve is running. Mine is not. So I'm gonna do npm run dev.
>> Brian Holt: Wait for it to build. Cool. Bundles now valid.

[00:04:34]
>> Brian Holt: Come back here.
>> Brian Holt: And I'm just gonna URL hack to details/block, whatever. And I got an error.
>> Brian Holt: Cool.
>> Brian Holt: Details such as
>> Brian Holt: I bet you this is a path issue. It's always a path issue.
>> Brian Holt: Make sure I have all the code that I'm expecting.

[00:05:39]
>> Brian Holt: Is everyone else seeing the same thing I am. Obviously must have messed something up here, so let's dig into this. Details, let's go back to client apps. It's gonna be something wrong with her router. We have a match here. Pattern details equals that and component equals details, that should be just fine as is.

[00:06:03] So let's just make sure details is a real component, that's always something you always wanna check.
>> Brian Holt: That's not it, that's interesting.
>> Brian Holt: So if we look at network, we're not even getting bundle. New is gonna be a patters. We're getting a four of four here, so it's gonna be details/pebblesite bundle.

[00:06:35] So I'm pretty sure that means, index.HTML. This probably needs to be /public.
>> Brian Holt: Cool. So to recap. Go back to your index.HTML. Make sure that is /public/bundle.js. We needed that leading slash because it was looking for details/public/bundle.js. In reality, we want it to look for /.
>> Brian Holt: We want it to go straight to the root.

[00:07:11] We don't want it to look in a relative directory. So just gonna say it, again, cuz you're gonna have a really bad time writing this. Make sure your script here has /public/bundle.js.
>> Brian Holt: We can rid of that log in there in the ClientApp, cool.
>> Brian Holt: So [COUH] now go back to your details, .js

[00:07:51]
>> Brian Holt: I'm going to do that pre-code thing that I showed you earlier, so pre code. We just wanna look at what React router actually passes the route. JSON.stringify cuz it passes you quite a bit of data. this.props, null and 4.
>> Brian Holt: So now if we refresh here again, it's hard to read.

[00:08:23]
>> Brian Holt: But you can see here it's passing quite a bit. But the most interesting thing is here, it has params. This is hard to read, hold on a sec. If I just put a div out here with className ='details'
>> Brian Holt: Just move that inside.
>> Brian Holt: This will make it easier to read, cuz you'll have some CSS behind it or is a background.

[00:08:56] So just encapsulate this in a div.
>> Brian Holt: Save that. Come back over here. Now, it's a little bit easier to read. So the most interesting part is you have params and you have an ID. And that gets passed right here. So whatever is up here in your URL kinda hard to see, but I promise this thing and this one right there are the same thing.

[00:09:27] But you can also see there's this location, the isExact match was true. You can see which pattern it matched. There's a bunch of information that the router just gives to you automatically, so that's good to know.
>> Brian Holt: Cool.
>> Brian Holt: So most importantly this is when we're gonna actually manipulating right here is this ID.