Render a link to another page.
Note that Href is a string constant typed based on your file structure.
import { TextProps } from 'react-native'
export interface LinkProps extends TextProps { children?: React.ReactNode
/** Path to navigate to. */ href: Href
/** Forward props to child component. Useful for custom buttons. */ asChild?: boolean
/** Replace the current route without adding to the history. */ replace?: boolean
/** Should push the current route */ push?: boolean
/** On web, this sets the HTML `class` directly. On native, no-op or can be used via a compile-time plugin. */ className?: string
onPress?: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent> | GestureResponderEvent ) => void
/** * **Web only:** Specifies where to open the `href`. * * - **_self**: the current tab. * - **_blank**: opens in a new tab or window. * - **_parent**: opens in the parent browsing context. If no parent, defaults to **_self**. * - **_top**: opens in the highest browsing context ancestor. If no ancestors, defaults to **_self**. * * This property is passed to the underlying anchor (`<a>`) tag. * * @default '_self' * * @example * <Link href="https://tamagui.dev" target="_blank">Open in new tab</Link> */ target?: '_self' | '_blank' | '_parent' | '_top' | string
/** * **Web only:** Specifies the relationship between the `href` and the current route. * * Common values: * - **nofollow**: Indicates to search engines that they should not follow the `href`. This is often used for user-generated content or links that should not influence search engine rankings. * - **noopener**: Suggests that the `href` should not have access to the opening window's `window.opener` object, which is a security measure to prevent potentially harmful behavior in cases of links that open new tabs or windows. * - **noreferrer**: Requests that the browser not send the `Referer` HTTP header when navigating to the `href`. This can enhance user privacy. * * The `rel` property is primarily used for informational and instructive purposes, helping browsers and web * crawlers make better decisions about how to handle and interpret the links on a web page. It is important * to use appropriate `rel` values to ensure that links behave as intended and adhere to best practices for web * development and SEO (Search Engine Optimization). * * This property is passed to the underlying anchor (`<a>`) tag. * * @example * <Link href="https://tamagui.dev" rel="nofollow">Open</Link> */ rel?: string
/** * **Web only:** Specifies that the `href` should be downloaded when the user clicks on the link, * instead of navigating to it. It is typically used for links that point to files that the user should download, * such as PDFs, images, documents, etc. * * The value of the `download` property, which represents the filename for the downloaded file. * This property is passed to the underlying anchor (`<a>`) tag. * * @example * <Link href="/image.jpg" download="my-image.jpg">Download image</Link> */ download?: string
/** * **Web only:** Display a different URL in the browser address bar than the actual route. * Useful for modals, side panels, or keeping URLs clean while navigating to complex routes. * * When the user navigates back/forward, the actual route will be restored from history. * * @example * <Link href="/photos/5/modal" mask="/photos/5">View Photo</Link> */ mask?: Href}Edit this page on GitHub.