react 导航active实现
实现 React 导航 Active 状态的方法
使用 React Router 的 NavLink 组件
React Router 提供了 NavLink 组件，可以自动为当前匹配的路由添加 active 类名。通过 activeClassName 或 className 函数自定义样式：
import { NavLink } from 'react-router-dom';
<NavLink
to="/home"
className={({ isActive }) => isActive ? 'active' : ''}
>
Home
</NavLink>手动判断路径匹配
通过 useLocation 获取当前路径，与导航项的路径比较后动态添加类名：
import { Link, useLocation } from 'react-router-dom';
const location = useLocation();
<Link
to="/about"
className={location.pathname === '/about' ? 'active' : ''}
>
About
</Link>使用 CSS Modules 或 Styled Components
结合 CSS Modules 或样式库实现高亮效果：
// CSS Modules
import styles from './Nav.module.css';
<NavLink to="/contact" className={({ isActive }) => isActive ? styles.active : ''} />
// Styled Components
const StyledLink = styled(NavLink)`
&.active { color: red; }
`;自定义 Hook 封装逻辑
抽象 active 判断逻辑为可复用的 Hook：
const useActivePath = (path) => {
const location = useLocation();
return location.pathname === path;
};
const isActive = useActivePath('/products');
<Link to="/products" className={isActive ? 'active' : ''} />注意事项
- 精确匹配需配置
end属性：<NavLink to="/" end> - 嵌套路由需处理路径前缀匹配逻辑
- 动态路由需使用
pathname.startsWith()等方法判断
