Actualmente estoy trabajando en un proyecto en el que quiero mostrar un cuadro de diálogo personalizado con mi propio contenido ("Guarde sus datos en borradores antes de salir"). He intentado diferentes métodos pero no puedo encontrar una forma adecuada de hacerlo. Exploré todas las preguntas anteriores sobre StackOverflow pero no funcionaron correctamente en mi caso.
useEffect(() => { return () => { window.onbeforeunload = function() { return "do you want save your data into drafts before leave?"; }; } },[])Actualmente, he escrito el código anterior en JavaScript simple para hacerlo, pero solo muestra el cuadro de diálogo en la pestaña cerrar y recargar mientras no se muestra en eventos de clic personalizados para navegar a otras páginas o al botón de retroceso de la ventana.
React no puede ayudarme en esto porque eliminan useBlocker , usePrompt de los nuevos lanzamientos. ¿Cómo puedo lograrlo?
Una forma de hacer esto es:
import { Prompt } from 'react-router' const MyComponent = () => ( <> <Prompt when={shouldBlockNavigation} message='Do you want ot save data before leave?' /> {/* Component JSX */} </> )Si desea actualizar la página o cerrar el navegador, agregue:
useEffect(() => { if (shouldBlockNavigation) { window.onbeforeunload = () => true } else { window.onbeforeunload = undefined } },[]);La segunda forma es usar el historial si usa el enrutador de reacción
useEffect(() => { let unblock = history.block((tx) => { // Navigation was blocked! Let's show a confirmation dialog // so the user can decide if they actually want to navigate // away and discard changes they've made in the current page. let url = tx.location.pathname; if (window.confirm(`Are you sure you want leave the page without saving?`)) { // Unblock the navigation. unblock(); // Retry the transition. tx.retry(); } }) },[]); useEffect(() => { const unloadCallback = (event) => { event.preventDefault(); event.returnValue = ""; return ""; }; window.addEventListener("beforeunload", unloadCallback); return () => { window.addEventListener("popstate", confirmation()); window.removeEventListener("beforeunload", unloadCallback); } }, []);Lo acabo de hacer con este ejemplo de código (en realidad, combino dos eventos para mostrar el diálogo cada vez que los usuarios abandonan una página) y funciona bien para mí. Gracias a todos ustedes... Especialmente @DrewReese por la ayuda