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?

CodePudding user response：

Several of the NavLink component's props take a callback function that is passed an isActive property.

NavLink

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>