usePathname

usePathname は、現在の URL の **pathname** を読み込むことができる **Client Component** のフックです。

知っておくと良いこと: cacheComponents が有効になっている場合、ルートに動的パラメータがある場合、usePathname は Suspense の境界を必要とする可能性があります。generateStaticParams を使用する場合、Suspense の境界はオプションです。

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

usePathname は意図的に Client Component での使用を必要とします。Client Component は最適化解除ではありません。Server Components アーキテクチャの不可欠な部分です。

例えば、usePathname を使用する Client Component は、初期ページロード時に HTML としてレンダリングされます。新しいルートにナビゲートする際、このコンポーネントを再フェッチする必要はありません。代わりに、コンポーネントは一度ダウンロードされ（クライアント JavaScript バンドルで）、現在の状態に基づいて再レンダリングされます。

知っておくと良いこと:

• Server Component から現在の URL を読み込むことはサポートされていません。この設計は、レイアウト状態がページナビゲーション間で保持されるように意図されたものです。
• ページが静的にプリレンダリングされており、アプリに `next.config` の rewrites または Proxy ファイルがある場合、usePathname() で pathname を読み込むと、ハイドレーションミスマッチエラーが発生する可能性があります。これは、初期値がサーバーから取得され、ルーティング後の実際のブラウザの pathname と一致しない場合があるためです。この問題を軽減する方法については、例 を参照してください。

Parameters

const pathname = usePathname()

usePathname はパラメータを取りません。

戻り値

usePathname は、現在の URL の pathname の文字列を返します。例：

例

ルート変更に応じた処理

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

リライトによるハイドレーションミスマッチの回避

ページがプリレンダリングされると、HTML はソースの pathname に対して生成されます。その後、ページが `next.config` または `Proxy` を使用したリライト経由で到達した場合、ブラウザの URL が異なる可能性があり、クライアントでは usePathname() はリライトされた pathname を読み取ります。

ハイドレーションミスマッチを避けるには、UI を、クライアントの pathname に依存する小さな、分離された部分のみにするように設計してください。サーバーで安定したフォールバックをレンダリングし、マウント後にその部分を更新します。

'use client'
 
import { useEffect, useState } from 'react'
import { usePathname } from 'next/navigation'
 
export default function PathnameBadge() {
  const pathname = usePathname()
  const [clientPathname, setClientPathname] = useState('')
 
  useEffect(() => {
    setClientPathname(pathname)
  }, [pathname])
 
  return (
    <p>
      Current pathname: <span>{clientPathname}</span>
    </p>
  )
}