useRouter
useRouter
フックにより、クライアントコンポーネント内でプログラム的にルートを変更できます。
推奨:
useRouter
を使用する特別な要件がない限り、ナビゲーションには<Link>
コンポーネントを使用してください。
app/example-client-component.tsx
TypeScript
'use client'
import { useRouter } from 'next/navigation'
export default function Page() {
const router = useRouter()
return (
<button type="button" onClick={() => router.push('/dashboard')}>
Dashboard
</button>
)
}
useRouter()
router.push(href: string, { scroll: boolean })
: 指定されたルートへクライアントサイドのナビゲーションを実行します。ブラウザの履歴スタックに新しいエントリを追加します。router.replace(href: string, { scroll: boolean })
: ブラウザの履歴スタックに新しいエントリを追加せず、指定されたルートへクライアントサイドのナビゲーションを実行します。router.refresh()
: 現在のルートを更新します。サーバーへ新しいリクエストを行い、データリクエストを再取得し、サーバーコンポーネントを再レンダリングします。クライアントは、影響を受けないクライアントサイドのReact(例:useState
)やブラウザの状態(例:スクロール位置)を失うことなく、更新されたReactサーバーコンポーネントのペイロードをマージします。router.prefetch(href: string)
: より高速なクライアントサイドの遷移のために、指定されたルートをプリフェッチします。router.back()
: ブラウザの履歴スタック内の前のルートに戻ります。router.forward()
: ブラウザの履歴スタックの次のページに進みます。
補足:
信頼できない、またはサニタイズされていない URL を router.push や router.replace に渡さないでください。これにより、クロスサイトスクリプティング(XSS)の脆弱性にさらされる可能性があります。例えば、javascript: を含む URL を router.push や router.replace に渡すと、そのコードがページのコンテキストで実行されてしまいます。
<Link>
コンポーネントは、ビューポート内に表示されるとルートを自動的にプリフェッチします。- フェッチリクエストがキャッシュされている場合、
refresh()
は同じ結果を再生成する可能性があります。cookies
やheaders
などの他の動的APIも、レスポンスを変更する可能性があります。
next/router
からの移行
- App Routerを使用する場合、
useRouter
フックはnext/router
ではなくnext/navigation
からインポートする必要があります pathname
文字列は削除され、usePathname()
に置き換えられましたquery
オブジェクトは削除され、useSearchParams()
に置き換えられましたrouter.events
は置き換えられました。以下を参照
例
ルーターイベント
usePathname
や useSearchParams
などの他のクライアントコンポーネントフックを構成することで、ページ変更を監視できます。
app/components/navigation-events.js
'use client'
import { useEffect } from 'react'
import { usePathname, useSearchParams } from 'next/navigation'
export function NavigationEvents() {
const pathname = usePathname()
const searchParams = useSearchParams()
useEffect(() => {
const url = `${pathname}?${searchParams}`
console.log(url)
// 現在のURLを使用できます
// ...
}, [pathname, searchParams])
return '...'
}
これをレイアウトにインポートできます。
app/layout.js
import { Suspense } from 'react'
import { NavigationEvents } from './components/navigation-events'
export default function Layout({ children }) {
return (
<html lang="en">
<body>
{children}
<Suspense fallback={null}>
<NavigationEvents />
</Suspense>
</body>
</html>
)
}
補足:
useSearchParams()
が静的レンダリング中に最も近いSuspense
境界までクライアントサイドのレンダリングを引き起こすため、<NavigationEvents>
はSuspense
境界でラップされています。詳細はこちら。
スクロールトップの無効化
デフォルトでは、Next.jsは新しいルートに遷移する際にページの先頭にスクロールします。router.push()
または router.replace()
に scroll: false
を渡すことで、この動作を無効にできます。
app/example-client-component.tsx
TypeScript
'use client'
import { useRouter } from 'next/navigation'
export default function Page() {
const router = useRouter()
return (
<button
type="button"
onClick={() => router.push('/dashboard', { scroll: false })}
>
Dashboard
</button>
)
}
バージョン履歴
バージョン | 変更点 |
---|---|
v13.0.0 | next/navigation から useRouter が導入されました。 |