NavLink Component

Wraps <Link> with additional props for styling active and pending states.

• Automatically applies classes to the link based on its active and pending states
  • Note that pending is only available with Framework and Data modes.
• Automatically applies aria-current="page" to the link when the link is active. See aria-current on MDN.
• States are additionally available through the className, style, and children render props.

Here's an example of how to use the <NavLink> component:

tsximport { NavLink } from "rasengan";

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

Learn more about the <NavLink> component here.