Using URL Parameters

With react-router, 0:00 you're able to declare dynamic routes using special URL parameters. 0:01 The data passed to the URL parameters can be displayed in your app. 0:06 So, let's say, that in the directory we need to display a list of 0:09 featured teachers here in the home component that links to different URLs. 0:12 When a user navigates to the new path we want to display the teacher's name and 0:16 topic area on the page like this. 0:21 Well, declaring a route to render a different component for 0:24 each teacher URL would be tedious and unnecessary work. 0:28 So, instead, we can use URL parameters to create one route that matches 0:31 a portion of a path dynamically, like a teacher name and topic area. 0:35 Then we can extract that data from the URL, and 0:40 render it inside the component like this. 0:43 So, first we need a component to render. 0:47 So, in the components folder there's a file named Feature.JS. 0:50 And the file contains a function that renders content about a teacher. 0:54 So, let's import Feature.JS in App.js with import featured from featured. 0:58 Then we'll add a new route inside switch right below the teacher's route. 1:09 We'll set the path to ''/teachers'' and component to Featured. 1:17 And let's set the teachers route to match its path exactly, 1:27 by giving it the exact prop. 1:32 So, now, the featured component will render when you include a subpath 1:35 in the teacher's URL. 1:40 For instance, teachers/alena, or teachers/ben. 1:42 So, to display content in your app from the data pass to the URL, 1:49 we use special URL parameters. 1:55 You define a parameter in route for the colon. 1:57 So, in our featured route, in the path right after teachers, 2:00 I'll add /: followed by name. 2:05 Now, name is just the name I use for this parameter. 2:08 Since, I want to pass a teachers name to the URL. 2:11 But, you can give the parameter any name you want, 2:14 as long as you include the colon in front of it. 2:16 The parameters of the path are dynamic and 2:19 made available to components via the route props. 2:21 So, that means you're able to use what's being passed 2:24 through the parameters as data in your component. 2:27 Earlier we learned that the match object contains information about 2:30 how a route matches the URL. 2:34 So, if you bring up react dev tools, and inspect the feature to component, 2:37 when you click to expand the match prop, you'll see the params property, click 2:43 the arrow, and it lists the parameter name and the value being passed to it, so 2:49 here it shows that ben is the parameter being passed to the featured route path. 2:54 That's right, so to access the params data from inside the featured component, 2:58 we'll need to pass the match object to featured. 3:04 So, we'll open up featured.js and pass the function the match object. 3:07 And inside the function I'll store the params data in a variable I'll call name, 3:14 then I'll access the value of the dynamic name, 3:22 URL parameter with match.params.name. 3:27 And to render the parameter as content in the component, 3:31 I'll include the name variable in the return statement. 3:36 So, back in our app, if you change the URL to teachers/guil, 3:42 the component renders Guil as the heading and below the text Introducing Guil. 3:47 Pass it say, Alena. 3:54 And it renders Alena, me. 3:57 Let's add one more URL parameter to the featured route. 3:59 This time we'll display the teacher's topic area. 4:03 So, in front of the name parameter add colon topic/ I'll give this a save, 4:06 and over in featured digest, I store the data in variable called topic. 4:13 And just like before, we can access the value of the topic parameter 4:21 with match.params.topic. 4:26 And we'll render the parameter data by including the topic variable 4:31 inside the second set of strong tags. 4:36 All right. Back in the app, 4:40 let's change the URL to teachers slash HTML slash treasure. 4:42 And the featured component uses the params being passed to the URL 4:51 to render both treasure and HTML in the content. 4:56 And you can even create links to several featured 5:01 teachers using any topic and name you want. 5:04 So, open up the file, Home.js, and let's import link from react-router-dom. 5:07 And right below the hr, I'll add an h3 for Featured Teachers. 5:18 Then add a set of opening and closing link tags. 5:28 I'll set the to value to teachers/HTML/Tommy and 5:33 the link text to Tommy Wingo. 5:41 Over in the Home component, there's my link, and when I click it, there you go. 5:48 HTML and Tommy display in the URLs path and in the featured components content. 5:53 You can also separate URL parameters with a dash. 6:01 So, for example, back in app.js, to display a teacher's first and last name, 6:05 I'll change the name parameter to :fname, for first name. 6:10 Then after that add -:lname, for last name. 6:15 Then in the featured component for the name variable, 6:20 I'll combine the two params using a template literal. 6:24 First parsing it, match.params.fname, 6:29 then a space, and I'll parse match.params.lname. 6:34 Now, over in the home component, you can set the link path to Tommy-Wingo. 6:39 And you'll see the full name in the URL and in the featured component. 6:47 Nice. 6:52 All right. I'll let you create links for 6:55 other teachers. 6:57 And you can create as many as you want. 6:58 To learn how to make parameters in a path optional and more use cases for 7:00 URL parameters, 7:04 be sure to read the resources posted in the teacher's notes in this video. 7:04