How do I stop the repetition of the nav-btn class in my react project?
I am using react-router-dom v6.
<NavLink
to="/"
className={(navInfo) => navInfo.isActive
? 'nav-btn bg-green-700 text-white'
: 'nav-btn'
}
>
Home
</NavLink>
How can I make my react router active route classname DRY
Viewed 55
2 Answers
that could be solved via a wrapper component, try this:
function MyCustomNavLink({to, navInfo, children}) {
return <NavLink to={to} classname={navInfo.isActive ? 'nav-btn bg-green-700 text-white' : 'nav-btn'}>{children}</NavLink>
}
If you mean specifically the "nav-btn" CSS classname, then I suggest passing your classes in an array and filtering what is active/truthy.
Example:
<NavLink
to="/"
className={({ isActive }) =>
[
"nav-btn",
isActive ? "bg-green-700 text-white" : null,
]
.filter(Boolean)
.join(" ")
}
>
Home
</NavLink>
An alternative is to use a utility to make working with and conditionally applying classnames. Classnames is a good package to use.
Example:
import classnames from 'classnames';
...
<NavLink
to="/"
className={({ isActive }) => classnames(
"nav-btn",
isActive ? "bg-green-700 text-white" : null,
)}
>
Home
</NavLink>
Related