This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

React Router: activeStyle & activeClassName

1:03 React lesson by

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.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

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.

Avatar
Hozefa

Is it possible to use className & activeClassName on the same element? I ask this because I have a default class that I need to be applied to all my links and an active class when link is active. Currently I have something like

const classes = classNames({
            'vx_globalNav-links': true,
            'vx_isActive': (route === this.props.location),
        });
        return classes;
In reply to egghead.io

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.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?