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"

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.

Edit this page on GitHub.