useLinkClickHandler

Framework Data Declarative

Summary

Reference Documentation ↗

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,
    mask,
    state,
    preventScrollReset,
    relative,
    viewTransition,
    defaultShouldRevalidate,
    useTransitions,
  }: {
    target?: React.HTMLAttributeAnchorTarget;
    replace?: boolean;
    mask?: To;
    state?: any;
    preventScrollReset?: boolean;
    relative?: RelativeRoutingType;
    defaultShouldRevalidate?: boolean;
    useTransitions?: boolean;
  } & Pick<NavigateOptions, "viewTransition"> = {},
): (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

Deprecated. Use React's <ViewTransition> component instead. See the migration guide.

options.defaultShouldRevalidate

Specify the default revalidation behavior for the navigation. When not specified, loaders revalidate according to the router's standard revalidation behavior.

options.mask

Masked location to display in the browser instead of the router location. Defaults to undefined.

options.useTransitions

Wraps the navigation in React.startTransition for concurrent rendering. Defaults to false.

Returns

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