useParams

useParams est un hook pour les Composants Client qui permet de lire les paramètres dynamiques d'une route remplis par l'URL actuelle.

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

Paramètres

const params = useParams()

useParams ne prend aucun paramètre.

Valeur de retour

useParams retourne un objet contenant les paramètres dynamiques remplis de la route actuelle.

• Chaque propriété de l'objet correspond à un segment dynamique actif.
• Le nom de la propriété correspond au nom du segment, et sa valeur correspond à ce qui a été utilisé pour remplir le segment.
• La valeur de la propriété sera soit une string soit un tableau de string selon le type de segment dynamique.
• Si la route ne contient aucun paramètre dynamique, useParams retourne un objet vide.
• Si utilisé dans le Pages Router, useParams retournera null lors du rendu initial et mettra à jour avec les propriétés selon les règles ci-dessus une fois le routeur prêt.

Par exemple :

Historique des versions