web-dev-qa-db-fra.com

Réagir | Comment détecter le rafraîchissement de page (F5)

J'utilise React js . J'ai besoin de détecter page refresh. Lorsque l'utilisateur clique sur l'icône d'actualisation ou appuie sur F5, je dois connaître l'événement.

J'ai essayé avec stackoverflow post en utilisant des fonctions javascript

J'ai utilisé la fonction javascript beforeunload toujours pas de chance.

onUnload(event) { 
  alert('page Refreshed')
}

componentDidMount() {
  window.addEventListener("beforeunload", this.onUnload)
}

componentWillUnmount() {
   window.removeEventListener("beforeunload", this.onUnload)
}

ici j'ai le code complet sur stackblitz

javascriptreactjsbrowserpage-refresh
4
Maria Jeysingh Anbu

Placez ceci dans le constructeur:

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

Cela fonctionnera, veuillez voir cet exemple sur stackblitz .

7
Abdellatif Derbel

Votre code semble fonctionner correctement, votre alerte ne fonctionnera pas car vous n'arrêtez pas l'actualisation. Si vous _console.log('hello') la sortie est affichée.

METTRE À JOUR ---

Cela devrait arrêter l'actualisation de l'utilisateur, mais cela dépend de ce que vous voulez faire.

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

Malheureusement, la réponse actuellement acceptée ne peut pas être considérée comme acceptable puisque performance.navigation.type est obsolète

La solution la plus récente pour cela est ATM expérimentale . En guise d'une solution de contournement, je ne peux que suggérer de conserver une valeur dans le magasin redux (ou ce que vous utilisez) pour indiquer l'état après le rechargement et lors de la première modification de route, mettez-la à jour pour indiquer que cette route a été modifiée. pas à cause de rafraîchissement.

0
Rvach.Flyver