React does not recognize the `activeClassName`?

Question

I don't know whats wrong, i've searched all internet for solution of this problem but i couldn't find any thing, please help! In my other app such code doing good, but whats the problem here i realy don't understand

import { NavLink } from "react-router-dom";
import s from './Navbar.module.css'

const Navbar = props => {

   return (
      <div className={s.sideBar}>
         <nav className={s.nav}>
            <ul className={s.nav_item}>
               <li className={s.nav_list}>
                  <NavLink activeClassName={s.activeLink} to="/profile"  >Profile</NavLink>
               </li>
            </ul>
            <ul className={s.nav_item}>
               <li className={s.nav_list}>
                  <NavLink to="/dialogs"   >Messages</NavLink>
               </li>
            </ul>
            <ul className={s.nav_item}>
               <li className={s.nav_list}>
                  <NavLink to="/news"  >News</NavLink>
               </li>
            </ul>
            <ul className={s.nav_item}>
               <li className={s.nav_list}>
                  <NavLink to="/music"  >Music</NavLink>
               </li>
            </ul>
            <ul className={s.nav_item}>
               <li className={s.nav_list}>
                  <NavLink to="/settings"  >Settings</NavLink>
               </li>
            </ul>
         </nav>
      </div>
   )
}
export default Navbar;   ```

If you are using react-router version 6, then activeClassName -is removed. Here is from the v5: In React Router v6, activeClassName will be removed and you should use the function className to apply classnames to either active or inactive NavLink components. — Tuhin, Nov 21 '21 at 15:31
To add to what Tuhin said, _"One difference as of `v6.0.0-beta.3` is that `activeClassName` and `activeStyle` have been removed from `NavLinkProps`"_ https://reactrouterdotcom.fly.dev/docs/en/v6/api#navlink — evolutionxbox, Nov 21 '21 at 15:33
but what about such code in my other app? this code works good and there are no any errors though i done that app month ago — Никита Решетняк, Nov 21 '21 at 15:58
Then the previous comments apply. It might be the other app is using an older version. — evolutionxbox, Nov 21 '21 at 16:36
navlink has color white; activeLink has green one, why all links become green? `NavLink className = {isActive => '${s.navlink}' + (isActive ? '${s.activeLink}' :' ')}` — Никита Решетняк, Nov 21 '21 at 18:07
RRDv6 `Link` component no longer has an `activeClassName` prop. Does this answer your question? https://stackoverflow.com/questions/70005101/why-activeclassname-property-in-navlink-is-not-working-in-6-0-2-version-of-react — Drew Reese, Nov 21 '21 at 18:33
Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. — Community, Nov 24 '21 at 17:53

score -1 · Answer 1 · answered Jul 22 '22 at 08:05

Its a migration error if you are now using v6 of react router.

Simply remove those codes.

Instead of

                        <NavLink
                            className="nav-item nav-link"
                            activeClassName="is-active"
                            to="/admin">
                            Admin
                        </NavLink>

Use this instead

                        <NavLink
                            className="nav-item nav-link"
                            to="/admin">
                            Admin
                        </NavLink>

And it is working perfectly. :D

React does not recognize the `activeClassName`?

1 Answers1