useParams

useParams es un hook para Componentes del Cliente que permite leer los parámetros dinámicos de una ruta rellenados por la URL actual.

'use client'

import { useParams } from 'next/navigation'

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

  // Ruta -> /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()

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

  return <></>
}

Parámetros

const params = useParams()

useParams no acepta ningún parámetro.

Retorno

useParams retorna un objeto que contiene los parámetros dinámicos rellenados de la ruta actual.

• Cada propiedad del objeto es un segmento dinámico activo.
• El nombre de la propiedad corresponde al nombre del segmento, y su valor es con lo que se ha rellenado el segmento.
• El valor de la propiedad será un string o un array de string dependiendo del tipo de segmento dinámico.
• Si la ruta no contiene parámetros dinámicos, useParams retorna un objeto vacío.
• Si se usa en el Pages Router, useParams retornará null en el renderizado inicial y se actualizará con las propiedades siguiendo las reglas anteriores una vez que el router esté listo.

Por ejemplo:

Historial de Versiones