Skip to main content

App Router Hooks

These hooks are available as of Solito v4. They will only work in the Next.js app directory on the Web side.

useRouter​

ts
'use client'
import { useRouter } from 'solito/navigation'
export function MyClientComponent() {
const router = useRouter()
const onPress = () => {
router.push('/users/fernando')
// or replace
router.replace('/users/fernando')
// or go back
router.back()
}
}
ts
'use client'
import { useRouter } from 'solito/navigation'
export function MyClientComponent() {
const router = useRouter()
const onPress = () => {
router.push('/users/fernando')
// or replace
router.replace('/users/fernando')
// or go back
router.back()
}
}

useParams​

100% feature parity with the Next.js hook.

tsx
'use client'
import { useParams } from 'solito/navigation'
type Params = { tag: string; item: string }
export default function ExampleClientComponent() {
const params = useParams<Params>()
// Route -> /shop/[tag]/[item]
// URL -> /shop/shoes/nike-air-max-97
// `params` -> { tag: 'shoes', item: 'nike-air-max-97' }
console.log(params)
return <></>
}
tsx
'use client'
import { useParams } from 'solito/navigation'
type Params = { tag: string; item: string }
export default function ExampleClientComponent() {
const params = useParams<Params>()
// Route -> /shop/[tag]/[item]
// URL -> /shop/shoes/nike-air-max-97
// `params` -> { tag: 'shoes', item: 'nike-air-max-97' }
console.log(params)
return <></>
}

If you want to reuse the types, and you're using a sufficiently-recent version of TypeScript, you can create a custom function with the wrapped type:

ts
import { useParams } from 'solito/navigation'
type Params = { tag: string; item: string }
export const useShoppingParams = useParam<Params>
// then in your component:
const params = useShoppingParams()
ts
import { useParams } from 'solito/navigation'
type Params = { tag: string; item: string }
export const useShoppingParams = useParam<Params>
// then in your component:
const params = useShoppingParams()

useSearchParams​

100% feature parity with the Next.js hook.

tsx
'use client'
import { useSearchParams } from 'solito/navigation'
type Params = { search: string }
export default function ExampleClientComponent() {
const searchParams = useSearchParams<Params>()
const search = searchParams.get('search')
// URL -> `/dashboard?search=my-project`
// `search` -> 'my-project'
return <></>
}
tsx
'use client'
import { useSearchParams } from 'solito/navigation'
type Params = { search: string }
export default function ExampleClientComponent() {
const searchParams = useSearchParams<Params>()
const search = searchParams.get('search')
// URL -> `/dashboard?search=my-project`
// `search` -> 'my-project'
return <></>
}

usePathname​

100% feature parity with the Next.js hook.

ts
'use client'
import { usePathname } from 'solito/navigation'
export default function ExampleClientComponent() {
const pathname = usePathname()
// /dashboard?search=hi
// pathname is /dashboard
return <>Current pathname: {pathname}</>
}
ts
'use client'
import { usePathname } from 'solito/navigation'
export default function ExampleClientComponent() {
const pathname = usePathname()
// /dashboard?search=hi
// pathname is /dashboard
return <>Current pathname: {pathname}</>
}

Please keep in mind that this hook may not be perfectly safe to use on iOS / Android if you haven't gone all-in on using links to power navigation for React Navigation. If all screens have a linking config, then this should be safe. Expo Router users can use this hook safely.

I am looking into adding support for usePathname for solito/router too, allowing its usage in non-App Router folders.

useUpdateSearchParams​

A Solito hook to update search parameters.

tsx
'use client'
type Params = {
id: string
}
export function App() {
const updateParams = useUpdateSearchParams<Params>()
const onPress = () => {
updateParams({ id: '123' })
// by default, router.replace is called on Web if you're updating an existing param
// to override this, see the webBehavior property
updateParams({ id: '123' }, { webBehavior: 'push' })
}
}
tsx
'use client'
type Params = {
id: string
}
export function App() {
const updateParams = useUpdateSearchParams<Params>()
const onPress = () => {
updateParams({ id: '123' })
// by default, router.replace is called on Web if you're updating an existing param
// to override this, see the webBehavior property
updateParams({ id: '123' }, { webBehavior: 'push' })
}
}

On native, setParams is called. On Web, it either uses push or replace.

A Solito hook to create accessible, custom link components.

tsx
'use client'
import { useLink } from 'solito/navigation'
export function App() {
const link = useLink({
href: '/users/fernando',
})
return <Pressable {...link} />
}
tsx
'use client'
import { useLink } from 'solito/navigation'
export function App() {
const link = useLink({
href: '/users/fernando',
})
return <Pressable {...link} />
}