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>