CODEWITHSUNDEEP
javascriptreactjsreact-routerreact-router-v4
Baterka
Baterka

Reputation: 722

React router v4 - activeStyle and activeClassName not working

For some reason, my activeStyle and activeClassName props for NavLink component are not working. Am I doing something wrong here? Maybe I am using v3 syntax?

import React from "react";
import {NavLink, Route} from "react-router-dom";

//...Imports of router components

export default class Layout extends React.Component {
    render() {
        return (
            <div>
                <NavLink activeStyle={{ color:'red' }} to="archives">
                   Archives
                </NavLink>
                <NavLink activeClassName="active" to="settings">
                    Settings
                </NavLink>
                //...Routes are here
            </div>
        );
    }
}

Upvotes: 1

Views: 1172

Answers (1)

StackedQ
StackedQ

Reputation: 4139

I believe the only problem is missing slashes, meaning:

<NavLink activeStyle={{ color:'red' }} to="/archives"> Archives </NavLink>    

<NavLink activeClassName="active" to="/settings"> Settings </NavLink>

Should work.

Upvotes: 3

Related Questions