React 无法识别 `activeClassName`？答案

【问题标题】：React does not recognize the `activeClassName`?React 无法识别 `activeClassName`？
【发布时间】：2022-07-22 16:05:11
【问题描述】：

我不知道怎么了，我已经在互联网上搜索了这个问题的解决方案，但我找不到任何东西，请帮忙！在我的其他应用程序中，这样的代码做得很好，但是我真的不明白这里的问题是什么

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;   ```

【问题讨论】：

正在使用什么版本的 react-router？
如果你使用 react-router 版本 6，那么 activeClassName - 被移除。这是来自 v5：在 React Router v6 中，activeClassName 将被删除，您应该使用函数 className 将类名应用于活动或非活动 NavLink 组件。
补充 Tuhin 所说的，“v6.0.0-beta.3 的一个区别是 activeClassName 和 activeStyle 已从 NavLinkProps 中删除” reactrouterdotcom.fly.dev/docs/en/v6/api#navlink
但是我的其他应用程序中的此类代码呢？这段代码运行良好，虽然我一个月前完成了那个应用程序，但没有任何错误
请你回答我的第一条评论好吗？

标签： javascript reactjs react-router-dom

【解决方案1】：

如果您现在使用的是 react 路由器 v6，则会出现迁移错误。

只需删除这些代码。

代替

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

改用这个

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

而且它运行良好。 :D

【讨论】：