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
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    React Router: activeStyle & activeClassName

    0.14 - 16
    react-routerReact Router

    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.



    Become a Member to view code

    You must be a Pro 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
    orLog In




    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.

    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.

    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.