技巧与提示

重用钩子

If you find yourself reusing the same hooks in multiple components, you can create a custom hook to encapsulate the parser configuration.

提示

所有绑定到相同键的查询状态将在组件间同步。

hooks/useCoordinates.ts

'use client'

import { useQueryStates, parseAsFloat } from 'nuqs'

export function useCoordinates() {
  return useQueryStates({
    lat: parseAsFloat.withDefault(0),
    lng: parseAsFloat.withDefault(0),
  })
}

components/Map.tsx

'use client'

import { useCoordinates } from '../hooks/useCoordinates'

function MapView() {
  const [{ lat, lng }] = useCoordinates() // Read-only
  return (
    <div>
      Latitude: {lat}
      Longitude: {lng}
    </div>
  )
}

function MapControls() {
  const [{ lat, lng }, setCoordinates] = useCoordinates()
  return (
    <div>
      <input
        type="number"
        value={lat}
        onChange={(e) => setCoordinates({ lat: e.target.valueAsNumber })}
      />
      <input
        type="number"
        value={lng}
        onChange={(e) => setCoordinates({ lng: e.target.valueAsNumber })}
      />
    </div>
  )
}

重用钩子

On this page