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
The match object contains information about how a route is matching the URL. We can access this data from inside components being rendered by <Route>. In this video, we'll use match to dynamically match <Route> and <NavLink> to the current URL and path.
Resources
When you render a component with a route,
React router passes the component
0:00
additional information about
the current path name and
0:04
the path and URL the route is matching.
0:07
If you inspect the courses
component in React.tools,
0:09
you'll see three props being passed to it,
history, location and match.
0:12
Now match contains information about
how a route is matching the URL.
0:18
For example the path property let's us
know that courses uses the /courses path
0:22
and the url property tells us that it's
matching the courses portion of the url.
0:29
And we can access this data from inside
components being rendered by routes.
0:33
The path and url properties are useful
when building nested routes and links.
0:37
So now that all our routes are in place,
let's take advantage of this data to have
0:42
our course's routes and link dynamically
match the current URL and path.
0:47
That way, we don't have to worry about
whether we're including a forward slash in
0:51
front of them, or if our nested routes and
links are going to match the current URL.
0:55
So first, to access the match data
from inside the Courses component,
1:00
we'll pass the match object
to the Courses function.
1:04
Next, we'll pas the NavLinks
the portion of the URL to match,
1:10
which you can access
from the url property.
1:15
So for HTML, we'll replace the to
value with a set of curly braces and
1:19
we'll create the paths using a template
literal that dynamically places or
1:24
interpolates the value of
match.url into the path.
1:29
And we'll do the same for CSS by
copying the expression we just wrote,
1:38
pasting it in to the to value and
switching the path to /css, and
1:43
we'll do the same for JavaScript.
1:48
Over in our routes, we'll follow the same
steps, except this time interpolate
1:54
the value of match.path which is
going to return the string /courses.
2:00
So first, we'll pass the redirect
2:05
route match.path to set the path.
2:09
And then in the redirect component,
2:14
set the two prop to an expression that
creates the path using a template literal.
2:17
And we'll do the same for
the remaining routes.
2:30
I'll simply copy this to value here and
2:33
replace the HTML, CSS,
and JavaScript paths.
2:36
Let's go over to the browser And
we're all set.
2:49
Everything still works as expected.
2:55
So now, even if we change the courses
path and URL down the road,
2:58
our NavLinks and Routes will
always match and render correctly.
3:02
Be sure to check the teacher's notes
of this video to learn more about
3:13
route props.
3:17
At this point you've learned enough about
React router to begin using it in your
3:18
React apps.
3:22
Well done.
3:23
Coming up in the next stage,
you'll push your skills even further by
3:24
learning how to create 404-like
error routes, past parameter and
3:27
data to routes and
change routes programmatically.
3:30
You need to sign up for Treehouse in order to download course files.
Sign up