Navigation

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

Link

You can use the Link component as follows:

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 takes an href typed from your file system routes (or a plain string if you turn off typed file system routing), plus replace, push, asChild, className, onPress, mask, and the web-only anchor props target, rel and download. See the full prop list on the <Link /> page.

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.

removeParams

removeParams strips named params from every route in a React Navigation state, at every nesting level. It returns a new state object and leaves the input untouched:

import { removeParams } from 'one'

// drop one-off params before persisting or restoring navigation state
const cleanState = removeParams(state, ['previewToken'])