useParams

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

'use client'

import { useParams } from 'next/navigation'

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

  // Маршрут -> /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 возвращает объект, содержащий заполненные динамические параметры текущего маршрута.

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

Примеры:

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