Shallow routing concept in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to enable shallow routing when changing the URL without a full page reload.

NextJS

router.push('/about', undefined, { [1]: true })

Drag options to blanks, or click blank then click option'

Areload

Bshallow

Creplace

Dscroll

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'reload' instead of 'shallow' causes a full page reload.

Forgetting to set the third argument as an object.

Setting shallow: true tells Next.js to change the URL without running data fetching methods again, enabling shallow routing.

2fill in blank

medium

Complete the code to listen for route changes and detect if shallow routing was used.

NextJS

router.events.on('routeChangeComplete', (url, [1]) => { if (shallow) { console.log('Shallow routing!'); } })

Drag options to blanks, or click blank then click option'

Ashallow

Bevent

Croute

Dpath

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong parameter name causes the shallow check to fail.

Ignoring the second argument and missing shallow routing detection.

The second argument to the event callback is a boolean named shallow indicating if shallow routing was used.

3fill in blank

hard

Fix the error in the code to correctly use shallow routing with router.replace.

NextJS

router.replace('/profile', undefined, [1])

Drag options to blanks, or click blank then click option'

A{ shallow: false }

Btrue

C{ shallow: true }

Dfalse

Attempts:

3 left

💡 Hint

Common Mistakes

Passing a boolean directly instead of an object.

Setting shallow to false disables shallow routing.

The third argument must be an object with shallow: true to enable shallow routing with replace.

4fill in blank

hard

Fill both blanks to update the URL with shallow routing and prevent scrolling to top.

NextJS

router.push('/dashboard', undefined, { [1]: true, [2]: false })

Drag options to blanks, or click blank then click option'

Ashallow

Bscroll

Creplace

Dreload

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing 'replace' with 'shallow'.

Forgetting to set scroll to false to keep scroll position.

Use shallow: true to enable shallow routing and scroll: false to prevent scrolling to the top after navigation.

5fill in blank

hard

Fill all three blanks to create a shallow route change with replace, no scroll, and log when shallow routing occurs.

NextJS

router.replace('/settings', undefined, { [1]: true, [2]: false });
router.events.on('routeChangeComplete', (url, [3]) => { if (shallow) console.log('Shallow route changed to', url); });

Drag options to blanks, or click blank then click option'

Ashallow

Bscroll

Dreload

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'reload' instead of 'shallow' disables shallow routing.

Not handling the shallow parameter in the event listener.

Set shallow: true and scroll: false in the replace options, and use shallow as the event callback parameter to detect shallow routing.