usePathname

usePathname это хук компонента клиента, который позволяет вам прочитать текущий путь URL.

'use client'
 
import { usePathname } from 'next/navigation'
 
export default function ExampleClientComponent() {
  const pathname = usePathname()
  return <p>Current pathname: {pathname}</p>
}

usePathname преднамеренно требует использования компонента клиента. Важно отметить, что компоненты клиента не являются способом деоптимизации. Они являются неотъемлемой частью архитектуры компонентов сервера.

Например, компонент клиента с usePathname будет рендериться в HTML при первоначальной загрузке страницы. При переходе на новый маршрут этому компоненту не нужно повторно загружаться. Вместо этого компонент загружается один раз (в пакете JavaScript клиента) и повторно рендерится на основе текущего состояния.

Важно знать:

• Чтение текущего URL из компонента сервера не поддерживается. Этот дизайн намеренный, чтобы поддерживать сохранение состояния макета при переходе на разные страницы.
• Режим совместимости:
  • usePathname может возвращать null, когда рендерится маршрут по умолчанию или когда страница каталога pages была автоматически статически оптимизирована Next.js, и маршрутизатор ещё не готов.
  • Next.js автоматически обновит ваши типы, если обнаружит как app, так и pages каталог в вашем проекте.

Параметры

const pathname = usePathname()

usePathname не принимает никаких параметров.

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

usePathname возвращает строку текущего пути URL. Например:

Примеры

Выполнение действий в ответ на изменение маршрута

'use client'
 
import { usePathname, useSearchParams } from 'next/navigation'
 
function ExampleClientComponent() {
  const pathname = usePathname()
  const searchParams = useSearchParams()
  useEffect(() => {
    // Do something here...
  }, [pathname, searchParams])
}