react-router's NavLink is different than Link.
It also provides helpers to style the link depending on navigation state.
E.g., in open-saas we do (look at the clsasName callback):
<NavLink
to="/admin/users"
end
className={({ isActive }) =>
cn(
"text-muted-foreground hover:bg-accent hover:text-accent-foreground group relative flex items-center gap-2.5 rounded-sm px-4 py-2 font-medium duration-300 ease-in-out",
{
"bg-accent text-accent-foreground": isActive,
},
)
}
>The problem is that we must import it from react-router, which makes it not type-safe.
react-router'sNavLinkis different thanLink.It also provides helpers to style the link depending on navigation state.
E.g., in
open-saaswe do (look at theclsasNamecallback):The problem is that we must import it from
react-router, which makes it not type-safe.