Styling Active Links

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