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

    React Router provides a simple way to change the appearance of 0:00
    a link when it's active, or when its path matches the URL. 0:02
    The NavLink component is a special version of the Link component that can 0:07
    recognize when it matches the current URL, so you can style it a certain way. 0:12
    So at the top of Header.js, 0:17
    let's replace the Link import with NavLink. 0:20
    Now, we can use the NavLink component in place of the Link 0:25

    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