Navigation

When you want to move between a page, you have a few options. Examples on this page will reference this routing structure:

_layout.tsx

Wraps all files in this directory and below

index.tsx

Matches "/"

blog.tsx

index.tsx

Matches "/blog"

[slug].tsx

Matches a single sub-path of "/blog", like "/blog/hello"

Link

You can use the Link component as follows:

app/index.tsx
import { Link } from 'one'

export default function HomePage() {
  return (
    <>
      <Link href="/blog">
        Go to the blog
      </Link>

      <Link href="/blog/introducing-one">
        Go to the Introducing One article
      </Link>
    </>
  )
}

Link accepts the following props, where Href is your typed file system routes (or a string if you turn off typed file system routing) and TextProps is the React Native Text element props:

export interface LinkProps extends TextProps {
  /** Path to route to. */
  href: Href

  /** Forward props to child component. Useful for custom buttons. */
  asChild?: boolean

  /** Should 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, can be used with CSS interop tools. */
  className?: string

  onPress?: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent> | GestureResponderEvent) => void

  /**
    * **Web only:** Specifies where to open the `href`, passed to the underlying anchor (`<a>`) tag.
    *   See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target
    */
  target?: '_self' | '_blank' | '_parent' | '_top' | (string & object)

  /**
    * **Web only:** Specifies the relationship between the `href` and the current route.
    *   See: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel
    */
  rel?: string

  /**
    * **Web only:** Specifies that the `href` should be downloaded when the user clicks on the link.
    */
  download?: string
}

useLinkTo

This hook will generate both an href string and an onPress function, see the useLinkTo docs for how to use it.

useRouter

This hook returns a static object used for routing. It will never update, and is only used for imperatively controlling the router. Useful for programmatically controlling the routing, and choosing between a push or replace.

See the useRouter documentation page for more.

PreviousExports

Layouts

Edit this page on GitHub.