useParams

useParams ist ein Client Component-Hook, der es ermöglicht, die dynamischen Parameter einer Route auszulesen, die durch die aktuelle URL gefüllt werden.

'use client'

import { useParams } from 'next/navigation'

export default function ExampleClientComponent() {
  const params = useParams<{ tag: string; item: string }>()

  // Route -> /shop/[tag]/[item]
  // URL -> /shop/shoes/nike-air-max-97
  // `params` -> { tag: 'shoes', item: 'nike-air-max-97' }
  console.log(params)

  return <></>
}

'use client'

import { useParams } from 'next/navigation'

export default function ExampleClientComponent() {
  const params = useParams()

  // Route -> /shop/[tag]/[item]
  // URL -> /shop/shoes/nike-air-max-97
  // `params` -> { tag: 'shoes', item: 'nike-air-max-97' }
  console.log(params)

  return <></>
}

Parameter

const params = useParams()

useParams benötigt keine Parameter.

Rückgabewert

useParams gibt ein Objekt zurück, das die gefüllten dynamischen Parameter der aktuellen Route enthält.

• Jede Eigenschaft im Objekt entspricht einem aktiven dynamischen Segment.
• Der Eigenschaftsname ist der Name des Segments, der Eigenschaftswert ist der Wert, mit dem das Segment gefüllt wurde.
• Der Eigenschaftswert ist entweder ein string oder ein Array von strings, abhängig vom Typ des dynamischen Segments.
• Wenn die Route keine dynamischen Parameter enthält, gibt useParams ein leeres Objekt zurück.
• Bei Verwendung im Pages Router gibt useParams beim ersten Rendern null zurück und aktualisiert sich mit den Eigenschaften gemäß den oben genannten Regeln, sobald der Router bereit ist.

Beispiele:

Versionsverlauf