Estoy tratando de avisar al usuario antes de salir de la página. Noté cuando el usuario ingresa a la página desde un enlace de elemento y luego cuando hago clic en Atrás, antes de que se dispare el evento de descarga.
Sin embargo, cuando el usuario ingresa a la página a través del componente NextJs Link, al hacer clic en Atrás no se activará antes del evento de descarga.
¿Cómo puedo seguir preguntando al usuario cuando uso el componente?
por ejemplo, ir a la página a través de este enlace y hacer clic en Atrás no se activará antes de descargar
<Link href={`/event/${encodeURIComponent(event.slug)}`}> <a> <h3>{event.name}</h3> </a> </Link>pero la vinculación regular de un elemento se activará antes de descargar al hacer clic en Atrás
ejemplo
<a href={"event/" + event.slug}> <h3>{event.name}</h3> </a>De acuerdo con la documentación de Next.js , cuando usa el componente Link :
Las transiciones del lado del cliente entre rutas se pueden habilitar a través del componente Link exportado por next/link. El enrutador Next.js le permite realizar transiciones de ruta del lado del cliente entre páginas, de forma similar a una aplicación de una sola página.
Está utilizando el componente Link para cambiar sus rutas, por lo que se considera que está en una sola página (incluso retroceder y avanzar muchas veces).
Ahora, eche un vistazo a Window: beforeunload event en MDN :
El evento beforeunload se activa cuando la ventana, el documento y sus recursos están a punto de descargarse. El documento aún está visible y el evento todavía se puede cancelar en este punto.
Entonces, cuando usa el componente Link con el específico mencionado, no es un comportamiento adecuado.
Como una solución para resolver los problemas, puede agregar useEffect y realizar la acción adecuada en él o en el método de cleanup . por ejemplo, coloque su función en useEffect en la página deseada para recibir una llamada en el componente montado. de esta manera, con cada cambio en las rutas o páginas, se activará el useEffect .