Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

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.

    reactReact
    0.14 - 16
    react-routerReact Router
    ^3.0.0
    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