メインコンテンツまでスキップ

useRouter

useRouterフックは、Client Component内でプログラム的にルートを変更できます。

推奨: useRouterを使用する特別な要件がない限り、ナビゲーションには<Link>コンポーネントを使用してください。

app/example-client-component.tsx
'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(): 現在のルートを更新します。サーバーに新しいリクエストを行い、データリクエストを再取得し、Server Component を再レンダリングします。クライアントは、更新された React Server Component のペイロードを、影響を受けないクライアント側の React（useStateなど）やブラウザの状態（スクロール位置など）を保持したままマージします。
  • router.prefetch(href: string): 提供されたルートをプリフェッチして、クライアント側の遷移を高速化します。
  • router.back(): ブラウザの履歴スタックで一つ前のページに遷移する。
  • router.forward(): ブラウザの履歴スタックで次のページに遷移する。

Good to know:

  • ビューポート内に<Link>コンポーネントが表示されると、自動的にリンク先のページをプリフェッチします。
  • refresh()は、フェッチリクエストがキャッシュされている場合、同じレスポンスを再生成することができます。しかし、cookiesやheadersのような他の動的関数がレスポンスに変更をもたらす可能性があります。

Migrating from next/router​

  • App Router を使用する場合は、next/routerではなくnext/navigationからuseRouterフックをインポートする必要があります。
  • pathname文字列は削除され、usePathname()に置き換えられました。
  • queryオブジェクトは削除され、useSearchParams() に置き換えられました。
  • router.eventsは置き換えられました。以下を参照。

完全な移行ガイドを見る.

例​

Router events​

usePathnameやuseSearchParamsのような他の Client Component のフックを組み合わせることで、ページの変更を検知することができます。

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 null
}

レイアウトにインポートできます。

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

Good to know: <NavigationEvents>はサスペンス境界(Suspense boundary)でラップされます。静的レンダリング中にuseSearchParams()を実行すると、最も近いサスペンス境界(Suspense boundary)までクライアント側でレンダリングを引き起こすためです。詳細はこちら。

デフォルトでは、Next.js は新しいルートに遷移するときにページの一番上にスクロールします。この動作を無効にするには、scroll: falseをrouter.push()またはrouter.replace()に渡します。

app/example-client-component.tsx
'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>
  )
}

Version 履歴​

VersionChanges
v13.0.0next/navigationからuseRouterを導入