react+导航active实现

实现 React 导航 active 状态的方法

在 React 中实现导航 active 状态可以通过多种方式完成，以下是几种常见的方法：

使用 React Router 的 NavLink

React Router 提供了 NavLink 组件，专门用于处理导航链接的 active 状态。它会自动为当前匹配的路由添加 active 类名。

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

function Navigation() {
  return (
    <nav>
      <NavLink
        to="/home"
        className={({ isActive }) => (isActive ? 'active' : '')}
      >
        Home
      </NavLink>
      <NavLink
        to="/about"
        className={({ isActive }) => (isActive ? 'active' : '')}
      >
        About
      </NavLink>
    </nav>
  );
}

自定义 active 类名

可以通过传递 activeClassName 或 activeStyle 属性来自定义 active 状态样式。

<NavLink
  to="/home"
  activeClassName="selected"
  activeStyle={{ fontWeight: 'bold' }}
>
  Home
</NavLink>

使用 useLocation 和 useState 手动管理

对于不使用 React Router 的情况，可以结合 useLocation 和 useState 手动管理 active 状态。

import { useState } from 'react';
import { useLocation } from 'react-router-dom';

function Navigation() {
  const location = useLocation();
  const [activeLink, setActiveLink] = useState(location.pathname);

  return (
    <nav>
      <a
        href="/home"
        className={activeLink === '/home' ? 'active' : ''}
        onClick={() => setActiveLink('/home')}
      >
        Home
      </a>
      <a
        href="/about"
        className={activeLink === '/about' ? 'active' : ''}
        onClick={() => setActiveLink('/about')}
      >
        About
      </a>
    </nav>
  );
}

使用 CSS Modules 或 styled-components

结合 CSS Modules 或 styled-components 可以更灵活地控制 active 状态的样式。

import styles from './Navigation.module.css';
import { NavLink } from 'react-router-dom';

function Navigation() {
  return (
    <nav>
      <NavLink
        to="/home"
        className={({ isActive }) =>
          isActive ? styles.active : styles.link
        }
      >
        Home
      </NavLink>
    </nav>
  );
}

动态路由匹配

对于动态路由，可以通过 end 属性控制匹配行为，确保子路由也能正确激活。

<NavLink to="/posts" end>
  Posts
</NavLink>

以上方法可以根据项目需求灵活选择，React Router 的 NavLink 是最推荐的方式，因其内置了路由匹配逻辑，简化了开发流程。