usePathname

usePathname は、現在の 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 は意図的にクライアントコンポーネントの使用を必要とします。クライアントコンポーネントは最適化されていないわけではなく、サーバーコンポーネントアーキテクチャの重要な一部であることに注意してください。

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

知っておくと便利:

サーバーコンポーネントから現在の URL を読み取ることはサポートされていません。この設計は、ページナビゲーション間でレイアウト状態を保持することを意図しています。

互換性モード:

フォールバックルートがレンダリングされている場合や、pages ディレクトリのページが Next.js によって自動的に静的最適化され、ルーターが準備できていない場合、usePathname は null を返すことがあります。

next.config や Middleware でリライトを使用する場合、usePathname と共に useState と useEffect も使用して、ハイドレーションミスマッチエラーを回避する必要があります。

Next.js は、プロジェクト内に app と pages ディレクトリの両方が存在する場合、自動的に型を更新します。

パラメーター

const pathname = usePathname()

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

戻り値

usePathname は現在の URL のパス名を文字列で返します。例:

URL	戻り値
`/`	`'/'`
`/dashboard`	`'/dashboard'`
`/dashboard?v=2`	`'/dashboard'`
`/blog/hello-world`	`'/blog/hello-world'`

例

ルート変更に応じて処理を実行する

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

バージョン	変更点
`v13.0.0`	`usePathname` が導入されました。

パラメーター

戻り値

例

ルート変更に応じて処理を実行する

On this page