如何在React中设置活动类？

Question

我使用 React Router 创建了一个导航

nav.tsx

import React from 'react'
import { menu } from './menu'
import { Link } from 'react-router-dom'
import styles from './HamburgerMenu.module.scss'

const HamburgerMenu: React.FC = () => {
    const [active, setActive] = React.useState<number>(0)
    console.log(active)
    return (
        <nav>
            <ul className={styles.menu}>
                {menu.map((item, index) => (
                    <li
                        onClick={() => setActive(index)}
                        key={item.title}
                        className={styles[active === index ? 'active' : '']}
                    >
                        <Link to={item.link}>{item.title}</Link>
                    </li>
                ))}
            </ul>
        </nav>
    )
}

export default HamburgerMenu

菜单.ts：

export const menu: IMenuItem[] = [
    {
        link: '/',
        title: 'главная'
    },
    {
        link: '/profile',
        title: 'профиль'
    },
    {
        link: '/discipline',
        title: 'наказания'
    },
    {
        link: '/store',
        title: 'магазин'
    },
    {
        link: '/statistics',
        title: 'статистика'
    }
]

main.tsx：

import React from 'react'
import ReactDOM from 'react-dom/client'
import { RouterProvider, createBrowserRouter } from 'react-router-dom'

import Home from './pages/Home/Home'

import './assets/style/global.scss'
import NotFoundPage from './pages/NotFoundPage'
import Profile from './pages/Profile/Profile'

const router = createBrowserRouter([
    {
        element: <Home />,
        path: '/'
    },
    {
        element: <Profile />,
        path: '/profile'
    },
    {
        element: <NotFoundPage />,
        path: '*'
    }
])

ReactDOM.createRoot(document.getElementById('root')!).render(
    <React.StrictMode>
        <RouterProvider router={router} />
    </React.StrictMode>
)

在“/”和“/profile”之间切换时，活动类不断重置并切换为0，如果我想要将活动类添加到“/profile”，那么我需要点击它2次，如果我在“/discipline”、“/store”、“/statistics”之间切换，正常分配班级。我知道这种行为很可能是由于“/discipline”、“/store”、“/statistics”不是声明的页面，但是“/”和“/profile”又如何呢？为什么会发生这种情况，如何纠正？

Answer 1

使用

NavLink

组件，默认为匹配的链接应用

"active"

类名，并使用 CSS 选择具有当前匹配链接的

li

元素。

示例：

const HamburgerMenu: React.FC = () => {
  return (
    <nav>
      <ul className={styles.menu}>
        {menu.map((item, index) => (
          <li
            key={item.title}
            className="nav-link-item" // <-- something easily targetable
          >
            <NavLink end to={item.link}>
              {item.title}
            </NavLink>
          </li>
        ))}
      </ul>
    </nav>
  );
};

li.nav-link-item {
  /* li styling */
}

li.nav-link-item:has(a.active) {
  /* "active" li styling overrides */
}

信息：

• 导航链接
• CSS：有

演示