Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

React Router v6 Basics

Well done!

You have completed React Router v6 Basics!

Sign up for Treehouse Back to Library

Styling Active Links

4:34 with Laura Coronel

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.

VS Code Shortcuts Used

Resources

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    A good intuitive navigation gives users visual feedback about 0:00
    which page they're visiting. 0:04
    React Router provides a simple way to change the appearance of 0:07
    a link when it's active, or when its path matches the URL. 0:11
    The NavLink component is a special version of the Link component that can 0:16
    recognize when it matches the current URL, so you can style it a certain way. 0:21
    So at the top of Header.js, 0:26
    let's replace the Link import with NavLink. 0:29
    Now, we can use the NavLink component in place of the Link 0:34
    component to display active navigation links. 0:39
    So in the nav, let's replace the Link tags with NavLink tags all at once. 0:43
    Again, I'll use the Cmd+Shift+L shortcut in Visual Studio Code 0:48
    to select all Link tags and change them to NavLink. 0:53
    If you inspect your links now in Chrome DevTools, 1:04
    you'll see that NavLink gives active links a default class of active. 1:08
    In the CSS, I've already created styles for the active class that 1:14
    changes the background color to blue, and the text color to white. 1:18
    Now, when you click on the link to navigate to a route, 1:23
    the link in the menu stays on the active styles. 1:28
    There's a small problem though. 1:31
    Notice how the Home link remains active on all route paths. 1:33
    React Router considers the /path the same as the /about, 1:39
    /teachers, and /courses path. 1:46
    To fix this, include the end prop inside the opening NavLink tag. 1:50
    The active class and styles will be applied to the Home 1:55
    link only when the URL matches its to attribute exactly. 2:00
    Now, Home remains active only when we're at the root path. 2:05
    The NavLink component also lets you assign a custom class name to an active link, 2:11
    and you'll be able to define active styles in line. 2:18
    For example, if you want to change the default active class name, 2:22
    include the className prop and pass it a function. 2:27
    React Router will provide this function with a parameter, 2:31
    which we can see if we log it to the console. 2:36
    So, in the parentheses, type prop, and 2:39
    we'll write console.log(prop). 2:43
    We can see in the console that React Router provides an object with 2:47
    the property of isActive to our function. 2:52
    isActive is set to true when the NavLink to attribute matches the current URL. 2:55
    Now, back to the about NavLink, let's first destructure the object. 3:03
    React Router passes to the function with {isActive}. 3:08
    We'll write a ternary operator that checks if isActive is true. 3:16
    If so, set the class name to custom-class-name. 3:21
    Else undefined or no class name. 3:28
    And you'll see the new class name gets rendered in the a tag for that link. 3:33
    In this case for the About link. 3:37
    You can write active styles directly inside a NavLink 3:41
    component using the style prop. 3:45
    For instance, to override the background color of the Home link, 3:48
    I'll include the style prop, and 3:53
    pass a function that takes in the isActive property. 3:56
    We'll use the ternary operator again to check if isActive is true. 4:00
    We'll set the background color to the value tomato, 4:06
    and undefined or no styles if isActive is false. 4:10
    So now, just the Home link displays the different background color when active. 4:15
    You can keep the className and style props in the project for 4:21
    your reference, but I'll go ahead and remove them from mine. 4:25
    All right, so it looks like our main navigation is complete. 4:30

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up