web-dev-qa-db-ja.com

React |ページの更新を検出する方法（F5）

React js を使用しています。検出する必要がありますpage refresh。ユーザーが更新アイコンを押すかF5キーを押すと、イベントを見つける必要があります。

JavaScript関数を使用して stackoverflow post で試しました

私はJavaScript関数beforeunloadを使用しましたが、まだうまくいきません。

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

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

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

ここに完全なコードがあります stackblitz

javascriptreactjsbrowserpage-refresh
13
Maria Jeysingh Anbu

これをコンストラクタに配置します。

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

動作します。この例を stackblitz で参照してください。

7
Abdellatif Derbel

コードは正常に機能しているようですが、更新を停止しないため、アラートは機能しません。 console.log('hello')の場合、出力が表示されます。

更新---

これはユーザーの更新を停止するはずですが、何をしたいかによります。

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

残念ながら、performance.navigation.typeは 非推奨 であるため、現在受け入れられている回答をこれ以上許容できると見なすことはできません。

そのための最新のAPIは実験的なATMです。回避策として、リロード後の状態を示すためにredux（またはユーザーが使用するもの）ストアに値を保存し、最初のルート変更時に、更新のためではなくルートが変更されたことを示すように更新することをお勧めします。

0
Rvach.Flyver