React-router: Got an error using activeClassName

[holzfelix]

Hi I'm using the sidebar example and want to mark the active page in the sidebar.

<li><NavItem to="/" className="fa fa-bars fa-2x" activeClassName="activeSidebar" aria-hidden="true"></NavItem></li>

But I got this error:

Warning: Unknown prop `activeClassName` on <a> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in a (created by Link)
    in Link (at index.js:76)
    in li (at index.js:76)
    in ul (at index.js:75)
    in div (at index.js:74)
    in div (at index.js:73)
    in div (at index.js:72)
    in Router (created by BrowserRouter)
    in BrowserRouter (at index.js:71)

Whats the problem in this case?

[selbekk]

Your example specifies <NavItem />, but the class is exposed as <NavLink /> - see if this helps you :)

[holzfelix]

NavLink is not known ...

same Problem with his:

<Link to="/" className="fa fa-bars fa-2x" activeClassName="activeSidebar"
                                  aria-hidden="true"></Link>

[timdorr]

Like @selbekk said, you need to use <NavLink>, not <Link>.

[selbekk]

react will warn you whenever you add an unknown property to a DOM-element, since it's most likely been put there by mistake. That's the case in your example, activeClassName is sent to Link which is sent to a, which prints the warning.

You have to import NavLink in order to use it - like this:

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