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
}
Edit this page on GitHub.