Tengo este caso de uso: una página con dos subpáginas bajo un hashrouter

por ejemplo

 domain.com/post/1 domain.com/post/1#details

en la ruta hash #detalles quiero escuchar los "clics del botón Atrás" y hacer una llamada a la API para actualizar la publicación antes de que se cierre la página.

Durante este tiempo, desea mostrar un control giratorio, luego, después de que se realiza la llamada api, deje que el navegador finalice window.history.back (lógica del botón Atrás)

¿Es eso posible, y cómo?

Estoy intentando esto ahora con éxito parcial. Estoy usando React framework con NextJS y tengo el siguiente código dentro de un componente

 useEffect(() => { async function onPopState(e: PopStateEvent): Promise<void> { return new Promise((resolve) => handleWantToClose(resolve)); } window.addEventListener('popstate', onPopState); return () => { window.removeEventListener('popstate', onPopState); }; });

En el fragmento anterior, handleWantToClose se considera correcto al hacer clic en el botón de navegación hacia atrás del navegador (o en el botón de retroceso móvil ios/android)

La cosa es que no puedo retrasar el estado pop. No espera a que la promesa termine de resolverse.

handleWantToClose es solo hacer una llamada a la API y luego llamar a la función de resolución.

Alguna idea ? Esto sería extremadamente útil para proporcionar una excelente interfaz de usuario para el sitio web para los usuarios móviles, especialmente los que usan mucho back button para navegar por los sitios web.

Otras cosas que probé

 e.preventDefault(); e.stopPropagation(); e.stopImmediatePropagation();

en mi popstatelistener, luego de que se realizó la llamada api, se activó window.history.back() manualmente pero no funcionó.

El evento popstate no se puede cancelar.