Previously, I was able to use the router events to intercept a navigation and show a confirmation modal before the user moves away. Is this still possible when using the app router?
#How to display a "Are you sure you want to navigate away modal" using app router.
unkempt briar
dusk sparrowBOT
Hi @unkempt briar. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Yes, it is still possible to use router events to intercept a navigation and show a confirmation modal before the user moves away when using the App Router in Next.js. You can listen to different events happening inside the Next.js Router, including routeChangeStart which fires when a route starts to change.
Here's an example of how to listen to the router event routeChangeStart:
useEffect(() => {
const handleRouteChange = (url, { shallow }) => {
console.log(
`App is changing to ${url} ${
shallow ? 'with' : 'without'
} shallow routing`
)
}
router.events.on('routeChangeStart', handleRouteChange)
// If the component is unmounted, unsubscribe
// from the event with the `off` method:
return () => {
router.events.off('routeChangeStart', handleRouteChange)
}
}, [router])
In this example, handleRouteChange is a function that gets called when a route starts to change. You can replace the console log with your own logic to show a confirmation modal.
Please note that in Next.js 11, router.events is no longer provided during pre-rendering. Ensure you're accessing router.events in useEffect as shown in the example above.
For more information, you can refer to the Next.js documentation on the useRouter hook (https://nextjs.org/docs/pages/api-reference/functions/use-router) and the guide on upgrading to version 11 (https://nextjs.org/docs/pages/building-your-application/upgrading/version-11).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
unkempt briar
@dusk sparrow This only works within the pages directory. router.events have been removed when using next/navigation
dusk sparrowBOT
Let me check the knowledge base for you. One moment! :books:
I see, you're using the new next/navigation package introduced in Next.js 13.3. Based on the provided extracts, it seems that the traditional router.events from next/router are not available in next/navigation.
However, you can still achieve similar functionality using the new routing features. For instance, you can use Intercepting Routes to control the navigation flow. This allows you to load a new route within the current layout while “masking” the browser URL, which can be useful for showing a confirmation modal before the user navigates away.
Here's an example of how you can use Intercepting Routes to create a modal:
// app/@authModal/login/page.tsx
'use client'
import { useRouter } from 'next/navigation'
import { Modal } from 'components/modal'
export default async function Login() {
const router = useRouter()
return (
<Modal>
<span onClick={() => router.back()}>Close modal</span>
<h1>Login</h1>
...
</Modal>
)
}
In this example, clicking the close button will navigate back, effectively closing the modal. You can replace this with your own logic to show a confirmation modal before navigating away.
For more information, you can refer to the Next.js documentation on Intercepting Routes (https://nextjs.org/docs/app/building-your-application/routing/intercepting-routes) and Parallel Routes (https://nextjs.org/docs/app/building-your-application/routing/parallel-routes).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
unkempt briar
@dusk sparrow this only handles a specific route. I want the modal to pop up when the user navigates anywhere
dusk sparrowBOT
Let me check the knowledge base for you. One moment! :books:
I'm sorry for the confusion, but based on the provided extracts, there doesn't seem to be a direct way to globally intercept all route changes with a confirmation modal using the new next/navigation package in Next.js 13.3.
The Intercepting Routes feature is designed to intercept specific routes, not all routes. It allows you to load a new route within the current layout while “masking” the browser URL, which can be useful for showing a modal for a specific route.
If you need to show a confirmation modal before navigating away from any page, you might need to implement a custom solution. This could involve tracking the current route in your application state and showing a confirmation modal whenever it changes.