¿Puede usar un oyente 'antes de descargar' en una función predeterminada de exportación? ¿Si es así, cómo?

Todos los ejemplos que veo en línea usan React Components. Soy novato en reaccionar. Entonces, cualquier explicación será útil y qué debo hacer para lograr esto.

export default function Review() {
...

useEffect(() => {
console.log("useeffect called")

window.addEventListener("beforeunload", save());

}, []);

...

return (...);

Aquí hay un enlace de CodeSandbox.io. Aquí encontrará que tengo 2 páginas, 1 en casa y el otro tablero.

Cuando voy al tablero. Recibo la Alerta. Pero saliendo del panel no recibo el mensaje de alerta. beforeunload no funciona como esperaba.

https://codesandbox.io/s/react-router-basic-forked-8uvvi?file=/

Answer

Una forma alternativa de llamar a una función cuando una página/componente está a punto de desmontarse es agregarlo como un retorno de su archivo useEffect(). Por ejemplo:

  useEffect(() => {
    return(() => save())
  }, []);

Ejemplo de CodeSandbox

No está pasando una onbeforeunloaddevolución de llamada, está invocando inmediatamente la alerta.

useEffect(() => {
  console.log("useeffect called");
  // subscribe event
  window.addEventListener("beforeunload", alert("HI"));
}, []);

Cree/defina una devolución de llamada que haga una o más de las siguientes cosas:

  • Evita el valor predeterminado en el objeto de evento.
  • returnValueAsigna una cadena a la propiedad del objeto de evento.
  • Devuelve una cadena del controlador de eventos.

ventana.antes de descargar

Note: To combat unwanted pop-ups, some browsers don't display prompts created in beforeunload event handlers unless the page has been interacted with. Moreover, some don't display them at all.

Sugerencia de código

useEffect(() => {
  const handler = (e) => {
    // Cancel the event
    e.preventDefault(); // If you prevent default behavior in Mozilla Firefox prompt will always be shown
    // Chrome requires returnValue to be set
    e.returnValue = "";

    // ... business logic to save any data, etc... before the window unloads
    save();

    return "";
  };

  // subscribe event
  window.addEventListener("beforeunload", handler);

  return () => {
    window.removeEventListener("beforeunload", handler);
  };
}, []);

Edite ¿puede-usar-un-escucha-antes-de-descargar-en-una-función-predeterminada-de-exportación-si-es-cómo-