usePathname
usePathname
は、現在のURLのパス名を読み取ることができるクライアントコンポーネントのフックです。
app/example-client-component.tsx
TypeScript
'use client'
import { usePathname } from 'next/navigation'
export default function ExampleClientComponent() {
const pathname = usePathname()
return <p>現在のパス名: {pathname}</p>
}
usePathname
は意図的にクライアントコンポーネントの使用を必要とします。クライアントコンポーネントが最適化の低下ではないことに注意することが重要です。それらはサーバーコンポーネントアーキテクチャの不可欠な部分です。
例えば、usePathname
を持つクライアントコンポーネントは、最初のページ読み込み時にHTMLにレンダリングされます。新しいルートに移動する際、このコンポーネントを再取得する必要はありません。代わりに、コンポーネントは一度だけダウンロードされ(クライアントのJavaScriptバンドルに)、現在の状態に基づいて再レンダリングされます。
補足:
- サーバーコンポーネントから現在のURLを読み取ることはサポートされていません。このデザインは、ページ遷移間でレイアウト状態を保持することを意図的にサポートしています。
- 互換性モード:
usePathname
は、フォールバックルートがレンダリングされている場合、またはpages
ディレクトリのページがNext.jsによって自動的に静的に最適化され、ルーターの準備ができていない場合にnull
を返すことがあります。next.config
またはMiddleware
でリライトを使用する際にusePathname
を使用する場合、ハイドレーション不一致エラーを避けるためにuseState
とuseEffect
も使用する必要があります。詳細についてはリライトの例を参照してください。- プロジェクトに
app
とpages
の両方のディレクトリが存在することを検出した場合、Next.jsは自動的に型を更新します。
パラメータ
const pathname = usePathname()
usePathname
はパラメータを取りません。
戻り値
usePathname
は現在のURLのパス名を文字列で返します。例:
URL | 戻り値 |
---|---|
/ | '/' |
/dashboard | '/dashboard' |
/dashboard?v=2 | '/dashboard' |
/blog/hello-world | '/blog/hello-world' |
例
ルート変更に応じて何かを行う
app/example-client-component.tsx
TypeScript
'use client'
import { usePathname, useSearchParams } from 'next/navigation'
function ExampleClientComponent() {
const pathname = usePathname()
const searchParams = useSearchParams()
useEffect(() => {
// ここで何かを行う...
}, [pathname, searchParams])
}
バージョン | 変更点 |
---|---|
v13.0.0 | usePathname 導入時期。 |