ReactJS - Unknown prop `activeClassName` on tag. Remove this prop from the element

Question

I am using react 15.4.2 and react-router4.0.0 and This project was bootstrapped with Create React App.

Here is my Code.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import {BrowserRouter as Router,Route,Link} from 'react-router-dom'


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

const HomePage = () => {
return(
    <section>
        <h2>This is Home page</h2>
        <Link to="/about">About</Link>
    </section>
)
}

const NestedOne = () => {
return (
    <section>
        <h2>Nested page 1</h2>
    </section>
)
}


const NestedTwo = () => {
return (
    <section>
        <h2>Nested page 2</h2>
    </section>
)
}


 ReactDOM.render(
 <Router> 
  <section>
    <Route exact path="/" component={HomePage} />
    <Route path="/about" component={AboutPage} />
    <Route path="/about/nestedone" component={NestedOne} />
    <Route path="/about/nestedtwo" component={NestedTwo} />
 </section>
 </Router>,
  document.getElementById('root')
);

When I browse /about, I am getting this error:

"Warning: Unknown prop activeClassName on tag. Remove this prop from the element.

What am I doing wrong here?

Thanks!

I don't see activeClassName at all here https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/Link.js Maybe you should use 'react-router' instead — AlexeyKuznetsov, Mar 31 '17 at 18:27
In about page, i am just trying to set an active link depending on my URL when I am in /about/nestedone or /about/nestedtwo. — habibun, Apr 01 '17 at 14:10

score 37 · Answer 1 · answered Dec 28 '21 at 10:23

37

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>

answered Dec 28 '21 at 10:23

Anuj Mehta

383
3
8

thanks for this answer. It worked perfectly for me. Instead of `'none'` I used `null` to prevent a non-active class, i.e. `className={({isActive}) => (isActive ? 'active' : null)}` – gdibble Apr 06 '22 at 00:38
1

But do you even really need all that code in the className attribute? Unlike "Link" "NavLink" seems to automatically activate whatever style is associated with the link if it's clicked on. See this repo: https://codesandbox.io/s/router-63-navlink-freeze-t65hnb – Luke Apr 17 '22 at 16:55
I've noticed that you can also just add a class "active" to CSS and React will automatically apply it to active NavLink – Kuba Nowoszyński Nov 13 '22 at 19:30

score 28 · Accepted Answer · edited Sep 27 '22 at 14:53

28

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'

edited Sep 27 '22 at 14:53

DᴀʀᴛʜVᴀᴅᴇʀ

7,681
17
73
127

answered Jun 20 '17 at 04:14

valdeci

13,962
6
55
80

This fixed my issue. Weird, NavLink isn't even listed in the docs: http://knowbody.github.io/react-router-docs/api/Link.html# – agm1984 Nov 02 '17 at 11:08
6

I'm getting this error even with NavLink... not sure why it's being thrown. – captDaylight Dec 14 '17 at 19:10
@captDaylight may you share a fiddle? – valdeci Dec 15 '17 at 13:11

score 12 · Answer 3 · edited May 26 '22 at 16:42

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>
    )
}

The correct answer after reactjs update to V6. – Hossein Khalili Nov 30 '21 at 13:57 — Hossein Khalili, Nov 30 '21 at 13:57

score 8 · Answer 4 · answered Mar 31 '17 at 19:06

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

answered Mar 31 '17 at 19:06

Damien Leroux

11,177
7
43
57

1

thanks, active still not working, anyways I downgrade it to 3. everything work's fine, except IndexRoute – habibun Apr 01 '17 at 15:34
are you importing `{NavLink} from 'react-router-dom'`? – psorensen Apr 25 '17 at 03:12

score 4 · Answer 5 · answered Dec 27 '18 at 13:33

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'

answered Dec 27 '18 at 13:33

Justin

901
8
11

score 3 · Answer 6 · answered Oct 07 '22 at 15:56

3

Using activeclassname instead of activeClassName fixed it for me, like so:

<NavLink to="/home" activeclassname="active">Home</NavLink>

answered Oct 07 '22 at 15:56

DhanteyUD

71
3

ReactJS - Unknown prop `activeClassName` on tag. Remove this prop from the element

6 Answers6

Linked