usePathname

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

'use client'

import { usePathname } from 'next/navigation'

export default function ExampleClientComponent() {
  const pathname = usePathname()
  return <p>Текущий путь: {pathname}</p>
}

'use client'

import { usePathname } from 'next/navigation'

export default function ExampleClientComponent() {
  const pathname = usePathname()
  return <p>Текущий путь: {pathname}</p>
}

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

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

Полезно знать:

• Чтение текущего URL в Серверных компонентах (Server Components) не поддерживается. Это сделано намеренно для сохранения состояния макета при навигации между страницами.
• Режим совместимости:
  • usePathname может вернуть null, когда рендерится резервный маршрут (fallback route) или когда страница из директории 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(() => {
    // Выполните здесь нужные действия...
  }, [pathname, searchParams])
}

'use client'

import { usePathname, useSearchParams } from 'next/navigation'

function ExampleClientComponent() {
  const pathname = usePathname()
  const searchParams = useSearchParams()
  useEffect(() => {
    // Выполните здесь нужные действия...
  }, [pathname, searchParams])
}