useParams

Returns URL parameters for the focused route, including dynamic segments and query string values.

On native, this hook reads the mounted screen’s own route parameters, including inherited layout parameters. Retained screens keep their own dynamic values when another screen becomes active. On web, dynamic parameters follow the current URL. Use useActiveParams to read the active route globally.

Basic Usage

import { useParams } from 'one'

// URL: /posts/123?sort=date

export default function PostPage() {
  const { id, sort } = useParams()
  // id = '123', sort = 'date'

  return <Text>Post {id}, sorted by {sort}</Text>
}

TypeScript

The best way to get fully typed params is with the createRoute helper:

import { createRoute } from 'one'

const route = createRoute<'/posts/[id]'>()

export default function PostPage() {
  const { id } = route.useParams()
  // id is automatically typed as string!

  return <Text>Post {id}</Text>
}

Enable auto-generation in your vite config to have this inserted automatically:

one({
  router: {
    experimental: {
      typedRoutesGeneration: 'runtime', // auto-inserts createRoute
    },
  },
})

See Typed Routes for full setup details.

You can also type params manually:

export default function PostPage() {
  const { id, sort } = useParams<{
    id: string
    sort?: 'date' | 'title'
  }>()

  return <Text>Post {id}</Text>
}

Catch-All Routes

For catch-all routes like [...slug].tsx, params are returned as arrays:

// URL: /docs/api/hooks/useParams

export default function DocsPage() {
  const { slug } = useParams<{ slug: string[] }>()
  // slug = ['api', 'hooks', 'useParams']

  return <Text>{slug.join(' / ')}</Text>
}

URL Decoding

Parameters are automatically URL-decoded:

// URL: /search?q=hello%20world
const { q } = useParams()
// q = 'hello world' (decoded)

useParams vs useActiveParams

In a stack navigator, if you push a new screen, useParams in the previous screen won’t update. Use useActiveParams if you need global parameter updates.

Related

• useActiveParams - Global params that update even when unfocused
• usePathname - Get just the pathname
• useSegments - Get route segments as array