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])
}