How to enable shallow routing

Answer

To enable shallow routing, set the shallow option to true. Consider the following example:-

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

// Current URL is '/'
function Page() {
const router = useRouter()

useEffect(() => {
// Always do navigations after the first render
router.push('/?counter=10', undefined, { shallow: true })
}, [])

useEffect(() => {
// The counter changed!
}, [router.query.counter])
}

export default Page