useLinkClickHandler

Summary

Handles the click behavior for router <Link> components.This is useful if you need to create custom <Link> components with the same click behavior we use in our exported <Link>.

Signature

function useLinkClickHandler<E extends Element = HTMLAnchorElement>(
  to: To,
  {
    target,
    replace: replaceProp,
    state,
    preventScrollReset,
    relative,
    viewTransition,
  }: {
    target?: React.HTMLAttributeAnchorTarget;
    replace?: boolean;
    state?: any;
    preventScrollReset?: boolean;
    relative?: RelativeRoutingType;
    viewTransition?: boolean;
  } = ,
): (event: React.MouseEvent<E, MouseEvent>) => void {}

Params

to

The URL to navigate to, can be a string or a partial Path.

options.preventScrollReset

Whether to prevent the scroll position from being reset to the top of the viewport on completion of the navigation when using the ScrollRestoration component. Defaults to false.

options.relative

The relative routing type to use for the link. Defaults to "route".

options.replace

Whether to replace the current History entry instead of pushing a new one. Defaults to false.

options.state

The state to add to the History entry for this navigation. Defaults to undefined.

options.target

The target attribute for the link. Defaults to undefined.

options.viewTransition

Enables a View Transition for this navigation. To apply specific styles during the transition, see useViewTransitionState. Defaults to false.

Returns

A click handler function that can be used in a custom Link component.