how to add simple className and fucntion return at the same time in react-CodePudding

I need to add 2 classes to NavLink. One of them is simple word "interlocuter" and the second is "active-int" only when link is active

I tried this:

<NavLink
  to="some-path"
  className={`${moduleStyle["simple-text"]} ${({isActive}) => isActive ? : 'active-int' : ''}`}
>
  Link
</NavLink>

CodePudding user response：

You can use activeClassName, docs : https://v5.reactrouter.com/web/api/NavLink/activeclassname-string

<NavLink
  to="/somepath"
  activeClassName="active-int"
  className="interlocuter"
>

CodePudding user response：

In react-router-dom v6 the NavLink component's className prop takes only a string or a function. Use the function variant to return the stringified classnames you want to use.

<NavLink
  to="some-path"
  className={({ isActive }) =>
    [
      moduleStyle["simple-text"],
      isActive ? : 'active-int' : null
    ]
      .filter(Boolean)
      .join(" ")
  }
>
  Link
</NavLink>