如何为带条件CSS类的React NavLink添加额外CSS类？

你之前的写法错误在于把条件判断函数放在了模板字符串里，这会导致React直接把函数代码当成字符串渲染，而不是执行函数返回对应的类名。

单个NavLink的正确写法 #

让className的回调函数直接返回固定类 + 条件类的组合字符串：

<NavLink 
  to='property' 
  className={({ isActive }) => 
    `${isActive ? "property-info-nav-active" : "property-info-nav-link"} additional-class`
  }
>
  Property
</NavLink>

优化多NavLink的重复逻辑 #

你的完整代码里多个NavLink用了相同的激活类判断逻辑，可以抽成复用函数减少冗余：

import { NavLink, Outlet } from "react-router-dom"
import "../index.css";

const LandlordLayout = () => {
  // 统一处理激活状态类名，支持传入额外类
  const getNavLinkClass = ({ isActive }, extraClass = "") => {
    const activeClass = isActive ? "landlord-nav-link-active" : "landlord-nav-link";
    return `${activeClass} ${extraClass}`;
  };

  return (
    <>  
        <div className="landlord-properties-menu"> 
            <NavLink to="." end className={(props) => getNavLinkClass(props, "extra-dashboard-class")}>Dashboard</NavLink>       
            <NavLink to="income" className={getNavLinkClass}>Income</NavLink>        
            <NavLink to="properties" className={(props) => getNavLinkClass(props, "extra-properties-class")}>Properties</NavLink>                 
            <NavLink to="reviews" className={getNavLinkClass}>Review</NavLink>                
        </div>
        <Outlet/>
    </>
  )
}

export default LandlordLayout

• 不需要额外类时，直接传className={getNavLinkClass}即可；需要额外类时，通过回调把状态props和额外类传给函数。

另一种简洁写法 #

如果场景简单，也可以先写基础类，再根据激活状态追加高亮类：

<NavLink 
  to="properties" 
  className={({ isActive }) => 
    `landlord-nav-link ${isActive ? "landlord-nav-link-active" : ""} extra-class`
  }
>
  Properties
</NavLink>

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