Quiero activar el evento beforeunload cuando el usuario haga clic en el botón Atrás. Configuré detectores de eventos para el evento beforeunload, así
useEffect(() => { const cb = (ev) => { ev.preventDefault(); return (ev.returnValue = "Changes might not be saved. Are you sure you want to close?"); }; window.addEventListener("beforeunload", cb); return () => window.removeEventListener("beforeunload", cb); }, []);Aquí está el código que detecta cuando se hace clic en el botón Atrás:
const history = useHistory(); useEffect(() => { return () => { if (history.action === "POP") { //ACTION TO BE DONE console.log("hoho", history.action); window.dispatchEvent(new Event("beforeunload")); } }; });Cuando hago clic en el botón Atrás, puedo ver 'hoho POP' pero el evento no se activa. ¿Cómo puedo arreglar esto?
Mi intención era mostrar la ventana emergente sobre la pérdida de cambios no guardados que aparece cuando se activa el evento beforeunload. Aunque todavía no puedo activar el evento beforeunload, logré encontrar una especie de solución.
En lugar de activar el evento, simplemente usé el componente Prompt del enrutador de reacción, así:
<Prompt message="Leaving this page will cause you to lose unsaved data. Are you sure?" />Consulte los documentos de react-router para obtener más información sobre este componente.