Tengo el siguiente código en mi aplicación que intenta recuperar algunos datos de una URL y luego actualiza el navegador con la nueva URL.

 const response = await fetch(url); if (response.ok) { ... window.history.pushState({ loaded: true }, null, url); }

Ahora, cada vez que hago clic para volver a obtener los datos (con una nueva URL), la URL en el navegador se actualiza correctamente. Sin embargo, si vuelvo a hacer clic, no hace nada a menos que haga clic suficientes veces para volver a la página referida.

Mi primera solución fue cambiar el código anterior a lo siguiente:

 const response = await fetch(url); if (response.ok) { ... if (window.history.state && window.history.state.loaded) window.history.pushState({ loaded: true }, null, url); else window.history.replaceState({ loaded: true }, null); }

Ahora, cuando vuelvo a hacer clic después de que se carga inicialmente, vuelve a la página referida, ya que simplemente reemplazo el estado y no inserto nada en la pila de historial, antes de haber tenido que volver a hacer clic dos veces. Sin embargo, todavía tengo el problema de que cuando vuelvo a recuperar los datos, ahora se enviarán a la pila de historial y no sucede nada cuando vuelvo a hacer clic.

Pensé que lo más fácil sería volver a cargar la página cuando haga clic en Atrás y los datos se hayan cargado. Por lo tanto probé lo siguiente:

 window.addEventListener('popstate', e => { if (e.state && e.state.loaded) window.location.href = window.location.pathname + window.location.search; });

Sin embargo, ahora parece que no puedo volver a la página referida. Esto se debe a que aunque vuelvo a cargar la página (en el detector de eventos "popstate") cuando obtiene los datos, dice que el estado se ha cargado.

Pensé que esto sería nulo después de la recarga, pero como no lo es, pensé que obligaría al navegador a asegurarse de que el estado inicial sea nulo cuando se cargue por primera vez:

 window.addEventListener('load', e => { window.history.replaceState(null, null); });

Sin embargo, aunque inicialmente parecía funcionar, descubrí que esto se debía solo a que tenía las herramientas de desarrollador en ejecución (con el almacenamiento en caché deshabilitado).

Estoy seguro de que me falta algo básico, ya que parece ser un problema bastante común. Agradecería si alguien pudiera mostrarme lo que estoy haciendo mal.