React Router v4 - как определить навигацию по кнопке "Назад" и обновление URL-адреса?

Вместо того, чтобы сравнивать ключ истории, вы можете сравнить путь, например, если вы находитесь на странице «/ page1 / page2» и нажимаете кнопку «Обновить», новое местоположение остается таким же. Но если вы нажмете обратное действие, новое местоположение будет «/ page1 /».

Это решение также использует слушателя для прослушивания любого действия, поступающего из истории.

  componentDidMount() {
    const unlisten = history.listen((location, action) => {
        if (action == 'POP') {
          \\ thisLocation is the current location of your page
          if (location.pathname != '/thisLocation/') {
            alert('Back Pressed: ' + String(location.pathname));
          } else {
            alert('Refreshed: ' + String(location.pathname));
          }
        }
    });
    this.setState({ ...this.state, unlisten: unlisten });
  }

  componentWillUnmount() {
    this.state.unlisten();
  }

Вы можете увидеть более подробную информацию по ссылке, предоставленной Рей Дьен в качестве комментария к вашему вопросу: https://www.npmjs.com/package/history

[РЕДАКТИРОВАТЬ]

Другой способ сделать это - использовать https://www.npmjs.com/package/react-router-last-location и выполните следующие действия:

import { useLastLocation } from 'react-router-last-location';

  componentDidMount() {
    const unlisten = history.listen((location, action) => {
          const lastLocation = useLastLocation();
          if (location.pathname == lastLocation.pathname) {
            alert('Back Pressed: ' + String(location.pathname));
          }
        }
    });
    this.setState({ ...this.state, unlisten: unlisten });
  }

  componentWillUnmount() {
    this.state.unlisten();
  }

Обратной стороной является то, что нет никакой разницы между активацией действия «Назад» или щелчком по ссылке, которая ведет на страницу, на которой вы были раньше, и то, и другое будет обнаружено как нажатие назад. Если вам не нужна новая зависимость, вы можете сделать это вручную, как указано в https://github.com/ReactTraining/react-router/issues/1066#issuecomment-412907443 создание промежуточного программного обеспечения.

Я думаю, это, по крайней мере, укажет вам правильное направление. Перейдите на yourwebsite.com.

let current_page = history.state.key

if(history.action == 'POP') {
  if(history.state.key == current_page) {
    return 'page was refreshed'
  }
  return 'back button was pressed'
}