With react-router,

you're able to declare dynamic routes using special URL parameters.

The data passed to the URL parameters can be displayed in your app.

So, let's say, that in the directory we need to display a list of

featured teachers here in the home component that links to different URLs.

When a user navigates to the new path we want to display the teacher's name and

topic area on the page like this.

Well, declaring a route to render a different component for

each teacher URL would be tedious and unnecessary work.

So, instead, we can use URL parameters to create one route that matches

a portion of a path dynamically, like a teacher name and topic area.

Then we can extract that data from the URL, and

render it inside the component like this.

So, first we need a component to render.

So, in the components folder there's a file named Feature.JS.

And the file contains a function that renders content about a teacher.

So, let's import Feature.JS in App.js with import featured from featured.

Then we'll add a new route inside switch right below the teacher's route.

We'll set the path to ''/teachers'' and component to Featured.

And let's set the teachers route to match its path exactly,

by giving it the exact prop.

So, now, the featured component will render when you include a subpath

in the teacher's URL.

For instance, teachers/alena, or teachers/ben.

So, to display content in your app from the data pass to the URL,

we use special URL parameters.

You define a parameter in route for the colon.

So, in our featured route, in the path right after teachers,

I'll add /: followed by name.

Now, name is just the name I use for this parameter.

Since, I want to pass a teachers name to the URL.

But, you can give the parameter any name you want,

as long as you include the colon in front of it.

The parameters of the path are dynamic and

made available to components via the route props.

So, that means you're able to use what's being passed

through the parameters as data in your component.

Earlier we learned that the match object contains information about

how a route matches the URL.

So, if you bring up react dev tools, and inspect the feature to component,

when you click to expand the match prop, you'll see the params property, click

the arrow, and it lists the parameter name and the value being passed to it, so

here it shows that ben is the parameter being passed to the featured route path.

That's right, so to access the params data from inside the featured component,

we'll need to pass the match object to featured.

So, we'll open up featured.js and pass the function the match object.

And inside the function I'll store the params data in a variable I'll call name,

then I'll access the value of the dynamic name,

URL parameter with match.params.name.

And to render the parameter as content in the component,

I'll include the name variable in the return statement.

So, back in our app, if you change the URL to teachers/guil,

the component renders Guil as the heading and below the text Introducing Guil.

Pass it say, Alena.

And it renders Alena, me.

Let's add one more URL parameter to the featured route.

This time we'll display the teacher's topic area.

So, in front of the name parameter add colon topic/ I'll give this a save,

and over in featured digest, I store the data in variable called topic.

And just like before, we can access the value of the topic parameter

with match.params.topic.

And we'll render the parameter data by including the topic variable

inside the second set of strong tags.

All right. Back in the app,

let's change the URL to teachers slash HTML slash treasure.

And the featured component uses the params being passed to the URL

to render both treasure and HTML in the content.

And you can even create links to several featured

teachers using any topic and name you want.

So, open up the file, Home.js, and let's import link from react-router-dom.

And right below the hr, I'll add an h3 for Featured Teachers.

Then add a set of opening and closing link tags.

I'll set the to value to teachers/HTML/Tommy and

the link text to Tommy Wingo.

Over in the Home component, there's my link, and when I click it, there you go.

HTML and Tommy display in the URLs path and in the featured components content.

You can also separate URL parameters with a dash.

So, for example, back in app.js, to display a teacher's first and last name,

I'll change the name parameter to :fname, for first name.

Then after that add -:lname, for last name.

Then in the featured component for the name variable,

I'll combine the two params using a template literal.

First parsing it, match.params.fname,

then a space, and I'll parse match.params.lname.

Now, over in the home component, you can set the link path to Tommy-Wingo.

And you'll see the full name in the URL and in the featured component.

Nice.

All right. I'll let you create links for

other teachers.

And you can create as many as you want.

To learn how to make parameters in a path optional and more use cases for

URL parameters,

be sure to read the resources posted in the teacher's notes in this video.