Variable NavLink`Const`

NavLink: ForwardRefExoticComponent<
NavLinkProps & RefAttributes<HTMLAnchorElement>,
> = ...

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

Automatically applies classes to the link based on its active and pending states, see NavLinkProps.className
- 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. See NavLinkRenderProps.

Example

<NavLink to="/message">Messages</NavLink>

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

@public

Param: props.caseSensitive

n/a

Param: props.children

n/a

Param: props.className

n/a

Param: props.discover

[modes: framework] n/a

Param: props.end

n/a

Param: props.prefetch

[modes: framework] n/a

Param: props.preventScrollReset

[modes: framework, data] n/a

Param: props.relative

n/a

Param: props.reloadDocument

n/a

Param: props.replace

n/a

Param: props.state

n/a

Param: props.style

n/a

Param: props.to

n/a

Param: props.viewTransition