如何为React-Router 6的NavLink简洁设置多个类名（含激活态）

你可以试试这几种更简洁的写法，不用重复写classes.link：

• 数组过滤法：
  把基础类和条件类放进数组，用filter(Boolean)过滤掉假值，再转成空格分隔的类名字符串，逻辑清晰且避免重复：

  <NavLink
    to={category.url}
    state={category}
    onClick={closeMenu}
    className={() => [
      classes.link,
      category.id === locationId && classes.active
    ].filter(Boolean).join(' ')}
  >
    {category.name}
  </NavLink>
  

• 简化模板字符串：
  因为基础类classes.link始终需要，直接把它写在前面，条件类只在满足时追加，不用写两次classes.link：

  <NavLink
    to={category.url}
    state={category}
    onClick={closeMenu}
    className={() => `${classes.link} ${category.id === locationId ? classes.active : ''}`}
  >
    {category.name}
  </NavLink>
  

  注：这里的空字符串不会影响CSS渲染，浏览器会自动忽略多余空格。

• 借助工具库（可选）：
  如果项目允许引入第三方工具库，classnames是处理动态类名的常用选择，写法更直观：
  先安装包：npm install classnames
  然后使用：

  import classnames from 'classnames';
  
  // ...
  
  <NavLink
    to={category.url}
    state={category}
    onClick={closeMenu}
    className={classnames(classes.link, {
      [classes.active]: category.id === locationId
    })}
  >
    {category.name}
  </NavLink>
  

另外，React Router 6的NavLink本身给className的回调函数提供了isActive参数，如果你的激活判断是基于路由匹配（而非自定义的category.id === locationId），还可以直接用这个参数进一步简化：

<NavLink
  to={category.url}
  state={category}
  onClick={closeMenu}
  className={({ isActive }) => [classes.link, isActive && classes.active].filter(Boolean).join(' ')}
>
  {category.name}
</NavLink>

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