How can I assign several classes to className while using NavLink isActive? Actually I want to add a base link styles like font-size and if it is active then active class should be applied otherwise base styles class.
My component:
<NavLink
to={category.url}
state={category}
onClick={closeMenu}
className={() => (category.id === locationId ? classes.active : classes.link)}
>
{category.name}
</NavLink>
I know that I can use template literals and set active class like this:
className={() => (category.id === locationId ? `${classes.active} ${classes.link}` : classes.link)}
But is there a more cleaner way?
Several of the NavLink component's props take a callback function that is passed an isActive property.
declare function NavLink( props: NavLinkProps ): React.ReactElement; interface NavLinkProps extends Omit< LinkProps, "className" | "style" | "children" > { caseSensitive?: boolean; children?: | React.ReactNode | ((props: { isActive: boolean }) => React.ReactNode); className?: | string | ((props: { isActive: boolean; }) => string | undefined); end?: boolean; style?: | React.CSSProperties | ((props: { isActive: boolean; }) => React.CSSProperties); }
What you can do is pass a callback function to the NavLink that returns the combined className string value.
Example:
<NavLink
to={category.url}
state={category}
onClick={closeMenu}
className={({ isActive }) =>
[
classes.link,
isActive ? classes.active : null,
]
.filter(Boolean)
.join(" ")
}
>
{category.name}
</NavLink>
If you don't need know which link is actually active and you really do just want to set the classes on category.id === locationId then apply the same logic under this different condition.
<NavLink
to={category.url}
state={category}
onClick={closeMenu}
className={() =>
[
classes.link,
category.id === locationId ? classes.active : null,
]
.filter(Boolean)
.join(" ")
}
>
{category.name}
</NavLink>