useParams

useParams ist ein Hook für Client-Komponenten, mit dem Sie die dynamischen Parameter einer Route lesen können, die von der aktuellen URL ausgefü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 '...'
}

Parameter

const params = useParams()

useParams akzeptiert keine Parameter.

Rückgabewert

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

• Jede Eigenschaft im Objekt ist ein aktives dynamisches Segment.
• Der Name der Eigenschaft ist der Name des Segments, und der Wert der Eigenschaft ist das, womit das Segment ausgefüllt wird.
• Der Wert der Eigenschaft 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.
• Wenn er im Pages Router verwendet wird, gibt useParams beim ersten Rendern null zurück und aktualisiert sich dann mit Eigenschaften gemäß den obigen Regeln, sobald der Router bereit ist.

Beispiele:

Versionsverlauf