NavLinkRenderProps type

type NavLinkRenderProps = { 
  isActive: boolean,
  isPending: boolean,
  isTransitioning: boolean,
}

The object passed to NavLink children, className, and style prop callbacks to render and style the link based on its state.

// className
<NavLink
  to="/messages"
  className={({ isActive, isPending }) =>
    isPending ? "pending" : isActive ? "active" : ""
  }
>
  Messages
</NavLink>

// style
<NavLink
  to="/messages"
  style={({ isActive, isPending }) => {
    return {
      fontWeight: isActive ? "bold" : "",
      color: isPending ? "red" : "black",
    }
  )}
/>

// children
<NavLink to="/tasks">
  {({ isActive, isPending }) => (
    <span className={isActive ? "active" : ""}>Tasks</span>
  )}
</NavLink>