score:27

Accepted answer

The activeClassName property is not a property of Link but of NavLink.

So, just change your code to use NavLink instead of Link:

const AboutPage = () => {
 return(
    <section>
        <h2>This is About page</h2>
        <NavLink activeClassName="active" to="/about/nestedone">Nestedone</NavLink>
        {' '}
        <NavLink activeClassName="active" to="/about/nestedtwo">Nested two</NavLink>
    </section>
)

Remember to import the NavLink from the react-router-dom:

import {  NavLink } from 'react-router-dom'

score:4

My issue was that I was using reactstrap and importing their NavLink element which does NOT have the attribute activeClassName. Make sure you import NavLink from the react-router library like this:

import { NavLink } from 'react-router-dom'

score:7

In React Router v6 activeClassName has been changed to just className where a prop isActive can be used to manipulate the styling.

For more info
https://reactrouter.com/docs/en/v6/upgrading/v5#remove-activeclassname-and-activestyle-props-from-navlink-

const AboutPage = () => {
    return(
        <section>
        <h2>This is About page</h2>
        <NavLink className={({ isActive }) => isActive? "active": ''} to="/about/nestedone">Nestedone</NavLink>
        {' '}
        <NavLink className={({ isActive }) => isActive? "active": ''} to="/about/nestedtwo">Nested two</NavLink>
        </section>
    )
}

score:8

activeClassName is not a property of Link but of NavLink.

Since react-router v4 beta8, the property is active by default. Verify which version is installed in your node modules folder

score:20

From v6 onwards of react-router replace activeClassName with className and use navData.isActive to toggle style.


Old way:

<NavLink to="/home" activeClassName="active-style">Home</NavLink>

v6 onwards:

<NavLink to="/home" className={(navData) => (navData.isActive ? "active-style" : 'none')}>Home</NavLink>

or you can also destructure isActive from navData:

 <NavLink to="/home" className={({isActive}) => (isActive ? "active-style" : 'none')}>Home</NavLink>

Related Query

More Query from same tag