如何用Tailwind CSS设置React Router Navlink激活状态？模板字符串失效问题

尝试用模板字符串给 react-router-dom 的 NavLink 设置 className 实现激活状态样式，但始终不生效。

有问题的代码：

className={`px-2 py-2.5 hover:bg-cprimary-300 hover:text-csecond-100 rounded-md transition ${({ isActive }) => isActive ? "bg-red-500" : "bg-black-500"}`}

仅保留激活状态相关代码测试，依然无效：

className={`${({ isActive }) => isActive ? "bg-red-500" : "bg-blue-500"}`}

但直接用函数形式赋值 className 就能正常工作：

className={({ isActive }) => isActive ? "bg-red-500" : "bg-blue-500"}

请问模板字符串的使用方式哪里有问题？

问题核心是模板字符串会把你传入的函数直接转换成字符串，而非让 React Router 执行这个函数。

当用模板字符串包裹函数时，最终传给 className 的是类似 "function({ isActive }) { return isActive ? 'bg-red-500' : 'bg-blue-500' }" 的无效字符串，这显然不是合法的 CSS 类名，自然不会生效。

而直接把函数赋值给 className 时，React Router 会自动调用该函数，传入包含 isActive 的参数对象，函数返回的正确类名会被正常应用到元素上。

如果想结合固定类名和动态激活类名，正确写法是在函数内部拼接字符串：

className={({ isActive }) => 
  `px-2 py-2.5 hover:bg-cprimary-300 hover:text-csecond-100 rounded-md transition ${isActive ? "bg-red-500" : "bg-black-500"}`
}

也可以用类名工具库简化（比如 clsx）：

import clsx from 'clsx';

className={({ isActive }) => clsx(
  "px-2 py-2.5 hover:bg-cprimary-300 hover:text-csecond-100 rounded-md transition",
  { "bg-red-500": isActive, "bg-black-500": !isActive }
)}

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