useParams

useParams — это хук для Клиентских компонентов (Client Components), который позволяет читать динамические параметры маршрута, заполненные текущим URL.

'use client'

import { useParams } from 'next/navigation'

export default function ExampleClientComponent() {
  const params = useParams()

  // Маршрут -> /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()

  // Маршрут -> /shop/[tag]/[item]
  // URL -> /shop/shoes/nike-air-max-97
  // `params` -> { tag: 'shoes', item: 'nike-air-max-97' }
  console.log(params)

  return <></>
}

Параметры

const params = useParams()

Хук useParams не принимает параметров.

Возвращаемое значение

useParams возвращает объект, содержащий заполненные динамические параметры текущего маршрута.

• Каждое свойство объекта представляет собой активный динамический сегмент.
• Имя свойства соответствует имени сегмента, а значение свойства — заполненному значению сегмента.
• Значение свойства может быть либо строкой, либо массивом строк в зависимости от типа динамического сегмента.
• Если маршрут не содержит динамических параметров, useParams возвращает пустой объект.
• При использовании в pages, useParams вернёт null.

Примеры:

История версий