usePathname

usePathname geçerli URL'nin yol adını okumanızı sağlayan bir İstemci Bileşeni kancasıdır.

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

usePathname kasıtlı olarak bir İstemci Bileşeni kullanılmasını gerektirir. İstemci Bileşenlerinin bir optimizasyon eksikliği olmadığını belirtmek önemlidir. Sunucu Bileşenleri mimarisinin ayrılmaz bir parçasıdır.

Örneğin, usePathname adresindeki bir İstemci Bileşeni ilk sayfa yüklemesinde HTML'ye dönüştürülür. Yeni bir rotaya gidildiğinde, bu bileşenin yeniden taranması gerekmez. Bunun yerine, bileşen bir kez indirilir (istemci JavaScript paketinde) ve mevcut duruma göre yeniden oluşturulur.

Bildiğim iyi oldu:

• Geçerli URL'nin bir Sunucu Bileşeninden okunması desteklenmez. Bu tasarım, sayfa gezintileri boyunca düzen durumunun korunmasını desteklemek için tasarlanmıştır.
• Uyumluluk modu:
  • usePathname bir geri dönüş rotası işlenirken veya bir pages dizin sayfası Next.js tarafından otomatik olarak statik olarak optimize edildiğinde ve yönlendirici hazır olmadığında null döndürülebilir.
  • Next.js, projenizde hem app hem de pages dizini tespit ederseniz türlerinizi otomatik olarak güncelleyecektir.

Parameters

const pathname = usePathname()

usePathname herhangi bir parametre almaz.

Returns

usePathname geçerli URL'nin yol adının bir dizesini döndürür. Örneğin:

Examples

Do something in response to a route change

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