如何将React Router v6.8.1中NavLink的isActive状态传递给子元素className？

错误原因 #

• 你在子元素（item.icon和span）的className模板字符串里直接嵌套函数是无效的——className属性只接受字符串值，不会自动执行你写的这个函数，所以根本拿不到isActive状态。
• isActive是NavLink组件的className回调专属参数，子元素无法直接访问这个状态，必须先在NavLink的回调里把它存成变量，再传递给子元素使用。

解决方法 #

把NavLink的className回调改成完整函数，先接收isActive参数并保存为变量，再在返回的JSX结构（包括子元素）里直接用这个变量拼接className。

修改后的完整代码：

<ul className="flex flex-col gap-2 px-3">
  {sidebarLinks.map((item) => {
    return (
      <li key={item.name}>
        <NavLink
          to={item.href}
          // 改成完整函数，先获取isActive再返回JSX
          className={({ isActive }) => {
            // 定义父元素的className
            const navLinkClass = isActive
              ? "group flex cursor-pointer items-center gap-3 rounded-md bg-gray-200 px-3 py-2 transition-all"
              : "group flex cursor-pointer items-center gap-3 rounded-md px-3 py-2 transition-all hover:bg-gray-200";
            
            // 直接在返回的JSX里使用isActive变量
            return (
              <div className={navLinkClass}>
                <item.icon
                  className={`h-5 stroke-2 ${
                    isActive ? "stroke-blue-700" : "stroke-gray-400"
                  }`}
                />
                <span
                  className={`font-semibold text-gray-700 group-hover:text-gray-900 ${
                    isActive ? "text-red-800" : "text-green-700"
                  }`}
                >
                  {item.name}
                </span>
              </div>
            );
          }}
        />
      </li>
    );
  })}
</ul>

说明 #

• 这里利用回调函数的作用域，让子元素能直接访问到isActive变量，无需额外定义状态。
• 如果你不想用div包裹，也可以直接把NavLink的children逻辑写在回调里，核心是确保isActive变量能被子元素访问到。

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