浅いルーティング

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

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

浅いルーティングを有効にするには、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;

ルーターオブジェクトをページに追加する必要がない場合は、以下のように Router API に直接使うこともできます:

import Router from 'next/router';
// ページ内
Router.push('/?counter=10', undefined, { shallow: true });

ページが置き換えられないまま、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 });

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