useParams

useParams es un hook para Componentes de 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()

  // 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 recibe ningún parámetro.

Retorno

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

• Cada propiedad en el objeto es un segmento dinámico activo.
• El nombre de la propiedad corresponde al nombre del segmento, y el valor de la propiedad es con qué 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 pages, useParams retornará null.

Por ejemplo:

Historial de versiones