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 are able to declare dynamic routes using special URL parameters. The data passed to the URL parameters can be displayed in your app.
Note
React Router has since added a change to react-router-dom version 6.4+ where you can no longer use multiple parameters in one dynamic route segment, /:fname-:lname for example.
You can read about it here in the React Router documentation.
You will first have to change the second segment of the route's path in App.js to one parameter like path=":topic/:name". Then we'll need to change lines 5 and 6 of Featured.js to the following...
let { name, topic } = useParams();
name = name.replace('-', ' ');
Here we're destructuring our params similar to before, but then we're reassigning name's value by removing the hyphen between the first and last names and replacing it with a space.
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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 featured
0:12
teachers here in the HOME component
that links to different URLs.
0:17
When a user navigates to the new path,
0:23
we want to display the teacher's name and
topic area on the page like this.
0:26
Well, declaring a route to
render a different component for
0:33
each teacher URL would be tedious and
unnecessary work.
0:38
So instead, we can use URL
parameters to create one route that
0:42
matches a portion of the path dynamically,
like a teacher's name and a topic area.
0:47
Then extract that data from the URL and
0:54
render it inside the component like this.
0:58
First, we need a component to render.
1:02
In the components folder,
there is a file name, Featured.js.
1:05
And the file contains a function that
renders content about a teacher.
1:11
So let's import the featured
component in App.js with
1:15
import Featured from
"./components/Featured".
1:21
Then we'll add a new route
right below the teachers route.
1:27
We'll set the path to "teachers/*" and
1:31
the element prop to Featured.
1:36
Now the featured component
will render when you
1:39
include a sub path to the /teachers URL,
1:44
like teachers/rohald or teachers/rachel.
1:48
To display content in your app
from the data pass to the URL,
1:52
we'll use special URL parameters.
1:57
You define a parameter in
a route path with a colon.
2:00
So in our featured route,
in the path after teachers,
2:05
I'll add colon, followed by name.
2:09
Now, name is just the name I use for
this parameter,
2:13
since I want to pass
a teacher's name to the URL.
2:17
But you can give a parameter
any name you want,
2:21
as long as you include
a colon in front of it.
2:25
The parameters of this
path are dynamic and
2:28
made available to components
via the useParams hook.
2:32
So that means you're able
to use what's being passed
2:36
through the URL parameters
as data in your components.
2:40
To access the parameter data from
inside the featured component,
2:45
we'll need to import the useParams
hook at the top of the file.
2:50
Remember, hooks can only be used in
function components, not class components.
2:57
To get the parameters
from the useParams hook,
3:04
we'll declare a variable named params and
set it equal to useParams().
3:09
Let's check out what the useParams hook
returns by logging params to the console.
3:16
In the browser,
let's navigate to teachers/chris.
3:26
In the console, we get an object with a
name key and the value of "chris", great.
3:31
Since params is an object,
3:39
we can destructure it by typing { name }.
3:42
To render the parameter as
content in the component,
3:48
include the name variable
in the return statement.
3:52
We'll add it between the first header
tags and between the first strong tags.
3:57
Back in our app, the component
renders chris as the heading, and
4:06
below the text, Introducing Chris.
4:11
Pass it Rohald, and it renders Rohald.
4:14
Neat, let's add one more URL
parameter to the featured route.
4:19
This time we'll display
the teachers topic area.
4:25
So in front of the name parameter,
add :topic/.
4:29
Let's save, and over in Featured.js,
add topic next to the name right here.
4:35
We'll render the parameter
data by including
4:41
the topic variable inside
the second set of strong tags.
4:45
All right, back in the app,
4:54
let's change the URL to teachers/CSS/Guil.
4:57
And the featured component
uses the params data being
5:02
passed to the URL to render both Guil and
CSS in the content.
5:07
You can even create links to several
featured teachers using any topic and
5:12
name you want.
5:18
So open up the file Home.js, and
5:19
let's import Link from react-router-dom.
5:23
Below the hr tags, I'll add an h3 tag for
Featured Teachers.
5:28
And add a set of opening and
closing Link tags.
5:37
Let's set the to value to
"teachers/HTML/Tommy" and
5:43
the Link text to Tommy Wingo.
5:49
Over in the HOME tab, there's our link.
5:54
And when we click it, HTML and
Tommy displays in the URL's path,
5:57
and in the Featured Components content.
6:02
You can also separate URLs with a dash.
6:06
For example,
to display a teacher's first and
6:09
last name,
change the name parameter to fname for
6:14
first name,
then add a -:lname for last name.
6:19
Then in the Featured component,
let's add fname and
6:24
lname to the destructured object.
6:29
And I'll combine the two params
using a template literal.
6:33
First, passing it fname,
6:39
then a space and pass lname.
6:42
Now, over in the Home component,
6:46
you can set the link path to /Tommy-Wingo.
6:50
And you can see the full name in the URL
and in the Featured component, nice.
6:55
Over in App.js since the Teachers
route path, and the Featured route
7:02
path both start with teachers, we can
actually create a nested route here.
7:07
Let's add a closing Route
tag at the Teachers route.
7:13
We'll nest the Featured
route in the Teacher route,
7:21
And remove teachers/ from the path,
since it's a child of the Teachers route.
7:28
Now we don't want the featured component
rendered inside the Teachers component.
7:37
We want to show either the teachers
component when the URL is /teachers,
7:43
or the featured component when the URL
matches teachers/topic/:fname-:lname.
7:50
So instead of using the Outlet
component like we did before,
7:57
we'll add a default child route
right above our Featured route.
8:02
We'll pass it the index prop and we'll cut
the element prop from the Teachers route.
8:07
Back in our app, our app works
just like it has before, great.
8:16
I'll let you create links for
other teachers.
8:21
You can create as many as you want.
8:24
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up