React Router 5+ HashRouter 处理浏览器后退按钮答案

【问题标题】：React Router 5+ HashRouter Handle Browser Back buttonReact Router 5+ HashRouter 处理浏览器后退按钮
【发布时间】：2020-08-12 17:27:04
【问题描述】：

我无法处理浏览器的后退按钮。我想要做的是提醒用户，如果他们返回，他们将被带到主屏幕，并且必须重新启动他们所在的流程。我使用的是 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 所以上面的代码 sn-p 不应该工作。 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', listener, false);
    };
  }, []);

【问题讨论】：

标签： javascript reactjs react-router

【解决方案1】：

你可以试试history对象的block方法

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

【讨论】：

我试过了，但不能正常工作。如果我确认我会再次得到确认对话框（无限循环）。也不确定如何取消，我还看到在确认对话框之前 url 发生了变化，类似于上面使用事件侦听器的先前行为。 ``` useEffect(() => { const listener = history.block(() => { if (confirm('are you sure?')) { history.push('/'); } else { // 如何取消？} }); return () => { listener(); }; }, []); ```
你应该返回 false 以停止 url 重定向。
很好用。如果我确认是，仍然会得到无限的确认循环。