React Router v4 - 如何检测后退按钮导航与 url 刷新？

Question

我在/page (PAGE A) 有一个网址，我想检测该页面是否从 (PAGE B) 导航到历史记录，或者是否用户在 (PAGE A) 上并通过 URL 栏刷新按钮手动刷新页面（不使用历史返回）。

我通过 react router 查看了所有历史记录、位置、道具，但没有找到区分用户如何导航到页面的方法。

在这两种情况下，history.action == 'POP' 是历史操作。理想情况下，当使用应用程序中的后退按钮从页面 b 回到页面 a 时，它会是 'POP'，而在页面 a 上，当刷新页面时，它将是 'POP' 以外的东西，例如 'REFRESH'例子。

我们如何区分它们以在我们的应用程序中运行不同的逻辑，因为它们都触发了'POP'？

Answer 1

可以不比较历史键，而是比较路径名，例如，如果您在页面“/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();
  }

您可以在 Rei Dien 提供的链接中查看更多详细信息，作为您问题的评论：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 创建中间件中的说明手动进行。

Answer 2

我认为这至少会为您指明正确的方向。导航到 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'
}