Reaccionar | Cómo detectar la actualización de la página (F5)

Estoy usando React js . Necesito detectar la page refresh . Cuando el usuario presiona el ícono de actualización o presiona F5, necesito averiguar el evento.

He intentado con la publicación stackoverflow utilizando funciones javascript

Utilicé la función de javascript antes de beforeunload aún sin suerte.

 onUnload(event) { alert('page Refreshed') } componentDidMount() { window.addEventListener("beforeunload", this.onUnload) } componentWillUnmount() { window.removeEventListener("beforeunload", this.onUnload) } 

Aquí tengo el código completo en stackblitz

Coloca esto en el constructor:

 if (window.performance) { if (performance.navigation.type == 1) { alert( "This page is reloaded" ); } else { alert( "This page is not reloaded"); } } 

Funcionará, por favor vea este ejemplo en stackblitz .

Tu código parece estar funcionando bien, tu alerta no funcionará porque no estás deteniendo la actualización. Si console.log('hello') se muestra la salida.

ACTUALIZACIÓN —

Esto debería detener la actualización del usuario, pero depende de lo que quiera que suceda.

 componentDidMount() { window.onbeforeunload = function() { this.onUnload(); return ""; }.bind(this); } 

Desafortunadamente, la respuesta actualmente aceptada no puede considerarse más aceptable ya que performance.navigation.type está en desuso

La API más nueva para eso es ATM experimental. Como solución alternativa, solo puedo sugerir que se guarde algún valor en el almacén de redux (o lo que sea que use) para indicar el estado después de la recarga y en el primer cambio de ruta actualícelo para indicar que la ruta no se modificó debido a la actualización.