A good intuitive navigation gives users

visual feedback about which page they're visiting.

react-router provides a simple way to change the appearance of a link when it's

active or when its path matches the URL.

The NavLink component is a special version of the link component that can recognize

when it matches the current URL, so you can style it a certain way.

So at the top of Header.js, let's replace the link import with NavLink.

And now we can use the NavLink component in place of link to

display active navigation links.

So in the Nav, let's replace the link tags with NavLink all at once.

Again, I'll use the Cmd+D shortcut and add them to select all link tags and

change them to NavLink.

If you inspect your links now, in Chrome Dev tools,

you'll see that NavLink gives active links a default class of active.

In the CSS, I've already created styles for the active class

that changes the background color to blue and the text color to white.

So now when you click on a link to navigate to a route,

the link in the menu takes on the active styles.

But there is a small problem.

Notice how the Home link remains active on all route paths.

Well, just like earlier, when we first declared our routes,

react-router considers the / path the same as the /about,

/teachers, and /courses paths.

Well, we already know the fix for this.

Let's include the exact prop inside the opening NavLink tag for the Home link.

So now the active class and styles will be applied to the Home link,

only when the URL matches its to attribute exactly.

So now, Home remains active only when we're at the root path.

The NavLink component also lets you assign a custom class name to an active link,

and you're able to define active styles inline.

So for example, if you want to change the default active class name,

include the active class name prop, and set it to your desired class name.

And you'll see that the new class name gets rendered in the a tag for that link,

in this case, it's for the About link.

You can also write active styles directly inside a NavLink component,

using the active style prop.

So for instance,

to override the background color of the Home link, I'll include activeStyle.

And pass it an object that sets background to the value tomato.

So now just the Home link displays the different background color when active.

Now you can keep the active class name and active style props in the project for

your reference, but I'll go ahead and remove them from mine.

All right, so it looks like our main navigation is complete.