The translation was generated automatically and may contain mistakes

RouterLink

RouterLink React component for building links in your application with support for library-generated route transitions vk-mini-apps-router .

Link building with other components, for example <Button> or <Link> , you need to write the event handler code onClick and also specify the attribute href with a transition address that depends on the type of Router .

B RouterLink You can specify an address to jump into one of the properties. Create a handler onClick No need. Also, you do not need to take into account the type of router when specifying the transition address.

Example

TypeScript

import { useEnableSwipeBack, useActiveVkuiLocation, RouterLink, useRouteNavigator } from '@vkontakte/vk-mini-apps-router';

// ... 

<InfoRow header="Links">
    <RouterLink to="/persik">My Cat</RouterLink>
    <RouterLink
        to={{ pathname: routes.default_root.default_view.persik_0, hash: "10" }}
        params={{ emotion: 'sad' }}
    >
        Sad persik
    </RouterLink>
    <RouterLink
        to={{ pathname: "/user/contacts", hash: "10" }}
    >
        Contacts
    </RouterLink>
</InfoRow>

Properties

Property	Type	Description
`to` Compulsory	`NavigationTarget`	End point for transition. You can choose one of three ways. Details in section NavigationTarget .
`replace` Unnecessary	`boolean`	Indicates whether a new address will replace the current one in the transition history ( `true` ) or a new address will be added at the end of the story ( `false` ). Default value: `false` .
`target` Unnecessary	`string`	Specifies the window in which the new URL will be OPENED. The possible values are the same as in standard HTML: • `_blank` • `_parent` • `_self` • `_top` Default value: `_self` .
`onClick` Unnecessary	`код`	Code that will execute when you click on a link. If the property `to` if it points to an address, it will both jump to that address and execute the code in the handler `onClick` .
`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 .

Component RouterLink It also contains the properties of the component [] [] Link] https://vkui.io/components/link from the Library VKUI . In addition, it contains standard properties used in React components, such as children which provides access to nested JSX elements.

RouterLink

Example

Properties

Materials on the topic

Технические работы