This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    React Router: activeStyle & activeClassName

    Joe MaddaloneJoe Maddalone

    react-router provides two props for setting a specific style on a Link component whose path matches our current route. activeStyle allows for an inline style while activeClassName allows for an class defined in an external stylesheet.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    00:00 If we want to create an active state to our link when it matches its particular path, we can use active style, which works just like any other style in React. Here, we'll pass in a color of green, and we'll go and copy this to the other links.

    00:22 When we save that, we can see that, since we're on the home path, home is green. We go to about. About is green. Contact is green. Back to home. We can also use something called active class name, and we can just pass in the name of an existing class. We'll just call this active.

    00:43 We'll jump over here to our index HTML and create that style class with a color of green. Save that, and if we load this back up over here, so home is green with the active style. About is green with the active style, and contact is green with the active class name.

    Discuss

    Discuss