浅いルーティングにより、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 });
これは新しいページなので、浅いルーティングを設定していても現在のページを破棄し、新しいページを読み込みデータの取得を待ちます。