Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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.
Resources
Optional route parameters
Add a ? to the end of a parameter:
<Route path="teachers/:topic/:fname/:lname?" component={Featured} />
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
You need to sign up for Treehouse in order to download course files.
Sign up