Реагировать | Как обнаружить обновление страницы (F5)

Question

Я использую React JS .Мне нужно обнаружить page refresh.Когда пользователь нажимает значок обновления или нажимает клавишу F5, мне нужно выяснить событие.

Я пытался с stackoverflow post с использованием функций JavaScript

Я использовал функцию JavaScript beforeunload все еще не повезло.

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

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

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

здесь у меня есть полный код на stackblitz

Answer 1

Поместите это в конструктор:

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

Это будет работать, смотрите этот пример на stackblitz .

Answer 2

К сожалению, принятый в настоящее время ответ не может считаться более приемлемым, поскольку performance.navigation.type равен устарел

Новейший API для этого - экспериментальный банкомат. В качестве обходного пути я могу только предложить сохранить какое-то значение в хранилище с избыточностью (или любым другим используемым вами), чтобы указать состояние после перезагрузки и при первом изменении маршрута обновить его, чтобы указать, что маршрут был изменен не из-за обновления.

Answer 3

Ваш код работает нормально, предупреждение не работает, потому что вы не прекращаете обновление. Если вы console.log('hello'), вывод отображается.

ОБНОВЛЕНИЕ ---

Это должно остановить обновление пользователя, но это зависит от того, что вы хотите, чтобы произошло.

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