Cómo detectar que el usuario ha hecho clic en el botón Recargar en el navegador:

Estoy tratando de usar la biblioteca useBeforeunload y el método de escucha de javascript beforeunload para detectar, sin embargo, el event.preventDefault() y establecer el valor de retorno en false todavía no hace nada, sino que sigue recargando la página aunque puse alguna etiqueta Modal para notificar usuario que va a recargar la página y apareció el modal justo después de presionar el botón Recargar pero forzó a recargar la página. También tengo un problema en términos de detección de Ctrl + Shift + R , parece que no se detectó por alguna razón, aunque traté de capturarlo usando el oyente de keydown . Lo que quería lograr es evitar que vuelva a cargar la página y mostrar el modal para notificar al usuario. Por favor vea mi código abajo:

Aplicación.jsx

 const [show, setShow] = useState(false); const onClose = () => setShow(false); // this will show the modal const disableF5 = ((e) => { if(window.location.pathname.includes('/apple/')) { if(!config.enableRefresh) { if (e.which === 116 || e.keyCode === 116 || (e.key === "r" && e.ctrlKey) || (e.key === "r" && e.shiftKey && e.ctrlKey)) { // ctrl + shift + r never detected e.preventDefault(); setShow(true); return; } } } }); const handleReloadCancel = useBeforeunload(event => { event.preventDefault(); // this should prevent it from reloading the page setShow(true) }); useEffect(() => { window.addEventListener('keydown', disableF5); window.addEventListener('beforeunload', handleReloadCancel); return () => { window.removeEventListener('keydown', disableF5); window.removeEventListener('beforeunload', handleReloadCancel); } }, [])

También intenté usar este método window.performance.navigation.type == 1 pero tampoco ayudó. ¿Alguna idea sobre cómo lograr mi objetivo? ¡Gracias!