导入SCSS模块后NavLink的active样式无法保持问题求助

核心问题分析 #

你遇到的问题主要有两个原因：

1. 语法错误：给className传递了对象{classes.active}，但className只接受字符串类型的值
2. 未利用NavLink内置的路由激活检测：手动传递active prop的方式不如依赖React Router自身的路由状态可靠，且CSS Modules的类名作用域导致默认的active类无法匹配

修复步骤 #

1. 修正TSX组件代码

移除手动维护的active prop，改用NavLink的内置激活状态检测：

import classes from "./NavigationItem.module.scss";
import { NavLink } from "react-router-dom";

type NavigationItemProps = {
  link: string;
  icon: string;
  children: React.ReactNode;
};

const NavigationItem = ({ link, icon, children }: NavigationItemProps) => {
  return (
    <li className={classes.NavigationItem}>
      <NavLink
        to={link}
        // 使用函数式className获取激活状态
        className={({ isActive }) => isActive ? classes.active : ""}
      >
        <i className={icon} aria-hidden="true"></i>
        <span className={classes.spanStyle}>{children}</span>
      </NavLink>
    </li>
  );
};

export default NavigationItem;

或者更简洁的方式，使用activeClassName属性：

<NavLink
  to={link}
  activeClassName={classes.active}
>

2. 调整SCSS Module样式

确保激活样式和 hover 样式正确作用于链接：

.NavigationItem {
  // 这里可以添加li元素的基础样式
}

// 激活状态样式
.active {
  border-bottom: 4px solid colors.$primarymain;
  border-radius: 30px 0 0 30px;
}

// 悬停状态样式
.NavigationItem a:hover {
  border-bottom: 4px solid colors.$primarymain;
  border-radius: 30px 0 0 30px;
}

.spanStyle {
  // 你的span样式
}

关键说明 #

• CSS Modules会自动给类名添加唯一哈希后缀（如active变成NavigationItem_active_xyz），因此必须通过classes.active引用作用域内的类名
• NavLink的isActive参数会自动根据当前路由匹配状态更新，无需手动维护激活状态
• 避免给className传递空字符串以外的无效值（比如空格），防止生成多余的空类

内容的提问来源于stack exchange，提问作者Pardis M