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