useParams

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

'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 <></>
}

'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ückgabewerte

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 in pages gibt useParams null zurück.

Beispiele:

Versionsverlauf