React Router 5+ HashRouter句柄浏览器“后退”按钮

如何解决React Router 5+ HashRouter句柄浏览器“后退”按钮

我无法处理浏览器的后退按钮。我想做的是警告用户，如果他们返回，它们将被带到主屏幕，并且必须重新启动他们所在的流程。我正在使用HashRouter，React Router v5.2.0。我尝试了以下操作，但不起作用

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


const [ locationKeys,setLocationKeys ] = useState([])
const history = useHistory()

useEffect(() => {
  return history.listen(location => {
    if (history.action === 'PUSH') {
      setLocationKeys([ location.key ])
    }

    if (history.action === 'POP') {
      if (locationKeys[1] === location.key) {
        setLocationKeys(([ _,...keys ]) => keys)

        // Handle forward event

      } else {
        setLocationKeys((keys) => [ location.key,...keys ])

        // Handle back event

      }
    }
  })
},[ locationKeys,])

从文档中进行

编辑，HashRouter不支持location.key，因此上面的代码段不起作用。 https://reactrouter.com/web/api/HashRouter

我也尝试了以下给出不希望有的行为的方法。根据历史记录堆栈中的内容，确认将被调用两次。我还注意到在用户确认或取消浏览器URL之前，它已更改为先前的屏幕URL，这似乎是造成这种奇怪行为的原因。

  const listener = function (event) {
    console.log('back');
    if (confirm('are you sure?')) {
      console.log("go back to home";
    } else {
      console.log("stay")
    }
  };
  useEffect(() => {
    window.addEventListener('popstate',listener,false);
    return () => {
      console.log('removing listener');
      window.removeEventListener('popstate',false);
    };
  },[]);

解决方法

您可以尝试使用历史对象的块方法

history.block(() => {
    /// your code           
});