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 Component) не поддерживается. Это сделано намеренно для сохранения состояния макета при навигации между страницами.
• Режим совместимости:
  • usePathname может вернуть null, когда рендерится резервный маршрут (fallback route) или когда страница из директории pages была автоматически статически оптимизирована (automatically statically optimized) Next.js и роутер ещё не готов.
  • При использовании usePathname с перезаписями (rewrites) в next.config или Middleware также необходимо использовать useState и useEffect, чтобы избежать ошибок несоответствия гидратации.
  • 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])
}