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
React Router provides a simple way to change the appearance of a link when it's active. The <NavLink> component is a special version of <Link> that can recognize when it matches the current URL.
Resources
A good intuitive navigation gives users
0:00
visual feedback about which
page they're visiting.
0:04
react-router provides a simple way to
change the appearance of a link when it's
0:06
active or when its path matches the URL.
0:09
The NavLink component is a special version
of the link component that can recognize
0:12
when it matches the current URL,
so you can style it a certain way.
0:17
So at the top of Header.js, let's
replace the link import with NavLink.
0:20
And now we can use the NavLink
component in place of link to
0:27
display active navigation links.
0:31
So in the Nav, let's replace the link
tags with NavLink all at once.
0:34
Again, I'll use the Cmd+D shortcut and
add them to select all link tags and
0:38
change them to NavLink.
0:43
If you inspect your links now,
in Chrome Dev tools,
0:51
you'll see that NavLink gives active
links a default class of active.
0:55
In the CSS, I've already created
styles for the active class
1:01
that changes the background color to
blue and the text color to white.
1:05
So now when you click on
a link to navigate to a route,
1:10
the link in the menu takes
on the active styles.
1:13
But there is a small problem.
1:16
Notice how the Home link remains
active on all route paths.
1:18
Well, just like earlier,
when we first declared our routes,
1:23
react-router considers the /
path the same as the /about,
1:27
/teachers, and /courses paths.
1:32
Well, we already know the fix for this.
1:35
Let's include the exact prop inside
the opening NavLink tag for the Home link.
1:37
So now the active class and
styles will be applied to the Home link,
1:44
only when the URL matches
its to attribute exactly.
1:47
So now, Home remains active only
when we're at the root path.
1:52
The NavLink component also lets you assign
a custom class name to an active link,
2:00
and you're able to define
active styles inline.
2:05
So for example, if you want to change
the default active class name,
2:09
include the active class name prop,
and set it to your desired class name.
2:13
And you'll see that the new class name
gets rendered in the a tag for that link,
2:28
in this case, it's for the About link.
2:32
You can also write active styles
directly inside a NavLink component,
2:36
using the active style prop.
2:41
So for instance,
2:42
to override the background color of
the Home link, I'll include activeStyle.
2:43
And pass it an object that sets
background to the value tomato.
2:50
So now just the Home link displays the
different background color when active.
2:58
Now you can keep the active class name and
active style props in the project for
3:05
your reference, but I'll go ahead and
remove them from mine.
3:08
All right, so it looks like our
main navigation is complete.
3:18
You need to sign up for Treehouse in order to download course files.
Sign up