观察者从某个页面点击后退按钮（Reactjs）

Question

他们有什么方法可以观察到点击后退按钮的反应吗？

实际上，我在分类页面上添加了一个代码，它提供的功能是将用户保持在页面上。

例如：客户浏览分类页面滚动浏览产品并点击产品页面然后点击返回按钮然后用户看到用户点击的完全相同的分类页面产品（即相同的产品位置）。

为此，我在类别页面上设置了以下代码

CategoryPage.js

const [scrollPosition, setScrollPosition] = React.useState('');

 React.useEffect(() => {
   var pathName = document.location.pathname.substr(1);
   if (window) {
     window.onscroll = function (e) {
       setScrollPosition(window.scrollY);
       if(scrollPosition != 0){
         sessionStorage.setItem("scrollPosition_"+pathName, scrollPosition);
       }
     };
   }
 }, [scrollPosition]);

 React.useEffect(() => {
   var pathName = document.location.pathname.substr(1);
   if (window && sessionStorage.getItem("scrollPosition_"+pathName)) {
     $(window).scrollTop(sessionStorage.getItem('scrollPosition_'+ pathName));
     console.log('position_set to = ' + sessionStorage.getItem('scrollPosition_'+ pathName));
   }
 }, []);

如您所见，代码scrollTop 屏幕中的值保存在会话存储中 它有效，但我需要这个东西只有在这种情况下才能工作 （即用户访问分类页面，滚动页面，点击产品，产品页面打开并点击返回按钮）

它不应该与任何其他场景一起使用，例如 （用户访问类别页面，滚动页面，单击产品，产品页面打开，用户单击另一个页面或主页并访问相同类别页面并使用上面的代码滚动它到同一页面的位置）。

解决方案：检查之前的路线是产品页面，然后滚动到顶部，否则什么都不做

他们对此有什么解决办法吗？ 如何查看上一条路线是产品页面？

Answer 1

您无法观察用户在浏览器应用程序本身中正在做什么（即单击后退按钮），但您可以侦听“popstate”事件。 https://developer.mozilla.org/en-US/docs/Web/API/History_API#examples 在 React 中你可以使用 history。

我想你会发现实例化一个history 对象并使用它来监听对你来说会更容易。

history

import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

const useBackListener = (callback) => {
  const listener = (location, action) => {
    if (action === "POP") {
      // back navigation
      callback(location, action);
    }
  };

  useEffect(() => {
    const unlisten = history.listen(listener);
    return unlisten;
  }, []);

  return path;
};

Answer 2

我们可以通过监听历史对象来观察后退按钮的点击。试试下面的例子，

import { useHistory } from 'react-router-dom';

const Test = () => {

  const history = useHistory();
  
  useEffect(() => {
    return () => {
      if (history.action === "POP") {
        
      }
    };
  }, [history])
}

事件POP 表示单击后退按钮。

参考：-https://reactrouter.com/web/api/history

您可以通过位置记录了解上一页

import { useHistory } from 'react-router-dom';

const Test = () => {
  const history = useHistory();

  useEffect(() => {
    return history.listen(location => {
      if (history.action === 'POP') {
        
      }
    })
  }, [])
}

location.from 会给你上一条路线。

响应 cmets 的更新：

我看到你正在使用next/router，它有beforePopState，它需要一个回调，如果cb返回false，那么路由器不会为POP事件做任何事情。

参考：https://nextjs.org/docs/api-reference/next/router#routerbeforepopstate

将路由历史记录（即pathname or asPath）保持在全局状态，从而您可以确定之前的路由是否是产品页面，并且在单击后退按钮（beforePopState）时，您可以执行您的代码。