Skip to content

Next.js

浅いルーティング

例

浅いルーティングにより、getServerSideProps や getStaticProps そして getInitialProps を含むデータフェッチメソッドを再度実行せずに URL を変更できます。

更新された pathname と query は、状態を失うことなく router オブジェクト( useRouter や withRouter によって追加されたもの)を介して受け取ることができます。

浅いルーティングを有効にするには、shallow オプションを true に設定します。以下を例に考えてみましょう:

import { useEffect } from 'react'
import { useRouter } from 'next/router'

// 現在のURLは '/'
function Page() {
  const router = useRouter()

  useEffect(() => {
    // 最初のレンダリング後は常にナビゲーションを行います
    router.push('/?counter=10', undefined, { shallow: true })
  }, [])

  useEffect(() => {
    // カウンターが変わりました！
  }, [router.query.counter])
}

export default Page

ページが置き換えられないまま、URL は /?counter=10 に更新されます。 ルートの状態のみ変更されます。

以下に示すように、componentDidUpdate を介して URL の変更を監視もできます:

componentDidUpdate(prevProps) {
  const { pathname, query } = this.props.router
  // 無限ループを回避するために props が変更されたことを確認します
  if (query.counter !== prevProps.router.query.counter) {
    // 新しい query に基づいてデータを取得する
  }
}

注意事項

浅いルーティングは同じページの URL の変更に対してのみ機能します。例えば、pages/about.js という別のページがあり、これを実行するとします:

router.push('/?counter=10', '/about?counter=10', { shallow: true });

これは新しいページなので、浅いルーティングを設定していても現在のページを破棄し、新しいページを読み込みデータの取得を待ちます。

ImperativelyAPI Routes: はじめに