shadimage
nuqs
itemadapter-react-router-v5source: ok · hit

React Router v5 Adapter

Using nuqs in React Router v5 applications.

npx shadcn add "https://nuqs.dev/r/adapter-react-router-v5.json"
free

No selection tags yet — empty means no evidence, not lack of support.

Dependencies

Bundle weight · light
react-router-dom@^5nuqs

Files1 · source cached 10/15/2026, 6:15:14 AM

src/registry/items/adapter-react-router-v5.source
import {
  type unstable_AdapterInterface as AdapterInterface,
  unstable_createAdapterProvider as createAdapterProvider,
  renderQueryString,
  type unstable_UpdateUrlFunction as UpdateUrlFunction
} from 'nuqs/adapters/custom'
import { useCallback, useMemo } from 'react'
import { useHistory, useLocation } from 'react-router-dom'

function useNuqsReactRouterV5Adapter(): AdapterInterface {
  const history = useHistory()
  const location = useLocation()
  const searchParams = useMemo(() => {
    return new URLSearchParams(location.search)
  }, [location.search])

  const updateUrl = useCallback<UpdateUrlFunction>(
    (search, options) => {
      const queryString = renderQueryString(search)
      if (options.history === 'push') {
        history.push({
          search: queryString,
          hash: window.location.hash
        })
      } else {
        history.replace({
          search: queryString,
          hash: window.location.hash
        })
      }
      if (options.scroll) {
        window.scrollTo(0, 0)
      }
    },
    [history.push, history.replace]
  )
  return {
    searchParams,
    updateUrl
  }
}

export const NuqsAdapter = createAdapterProvider(useNuqsReactRouterV5Adapter)

More from nuqs

Browse all components in this library →