如何在React-Router中设置活动类？

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'

之间切换时，

"active"

类不断重置并切换为0，如果我想要将

"active"

类添加到

'/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：有

演示