The translation was generated automatically and may contain mistakes

useLinkClickHandler

Building Links with Components <Button> or <Link> write the event handler code onClick which will move to a new address. The transition address depends on type of Router in your application.

Function useLinkClickHandler(...) takes an address to jump to and creates a code that can be inserted into the onClick -processor and use to move to the specified address.

Example

TypeScript

import { useHref, useLinkCreateHandler } from '@vkontake/vk-mini-apps-router';

const hrefValue = useHref('/contacts/edit');
const onClickCode = useLinkCreateHandle('/contacts/edit');

<Link href={hrefValue} onClick={ onClickCode }>Редактировать</Link>

Announcement

TypeScript

export function useLinkClickHandler<E extends Element = HTMLAnchorElement>(
  to: NavigationTarget,
  {
    target?: HTMLAttributeAnchorTarget;
    replace?: boolean;
    preventScrollReset?: boolean;
    relative?: RelativeRoutingType;
  } 
  ): (event: ReactMouseEvent<E, MouseEvent>) => void

Parameters

Function parameters

Parameter	Type	Description
`to` Mandatory	`NavigationTarget`	End point for transition. You can choose one of three ways. Details in section NavigationTarget .
`свойства`	`object`	The object that describes transition properties .

Properties of Transition

Поле	Type	Description
`target` Unnecessary	`string`	The window where the new URL will be OPENED. The possible values are the same as in standard HTML: • `_blank` • `_parent` • `_self` • `_top` Default value: `_self` .
`replace` Unnecessary	`boolean`	If `true` , the new address will replace the current one in the transition history. If `false` A new address will be added to the story. Default value: `false` .
`preventScrollReset` Unnecessary	`boolean`	If `true` , the scroll position of the screen will not change when you transition. If `false` , scrolling down to `0` . Default value: `false` .
`relative` Unnecessary	`string`	Reserved for future use.
`params` Unnecessary	`object`	An object whose fields contain values path-параметров indicated on the way. Path parameters can also be specified in `to` . Usage `params` It can be easier to code and easier to read. Details in section Path parameters .

Result

useLinkClickHandler(...) returns an event handler function onClick . You can add it to the component you’re using, as shown in example above .