Question

我在/page有一个网址，我想检测网页是否已导航到历史记录，或者是否通过网址导航到了该网页（不使用历史记录）。

基本上，如果用户正在查看该页面，因为他们点击了后面的历史记录按钮navigatedViaBackButton应为true，否则为false。

我通过反应路由器查看了所有历史记录，位置，道具，但没有找到区分用户导航到页面的方式。

如何区分navigatedViaBackButton值？

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'
}

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

2 个答案: