如何显示导航提示(GatsbyJS/ReachRouter)

Question

是否可以在离开页面之前显示页面确认？我目前使用的是GatsbyJS/@reach-router。我看到的所有帖子都是在react-router中做这件事是多么容易，但我从来没有在我目前使用的框架中看到过实现。

我之所以需要实现这一点，是因为我想比较页面第一次加载时的第一个状态和对此特定状态所做的操作(如果用户向其输入了一些内容)。基本上，我使用Redux作为我的状态(因为有很多组件，我不想一直从伟大的祖辈组件向下传递道具-这将是相当混乱的)。

所以，我只是想抛出一个确认/模式，以防他们做了一些更改，并且他们错误地导航了(这样我们就可以保存数据...)。我们如何实现这一点？谢谢你的帮助。

Answer 1

可以试试这个吗？

  import { useLocation, globalHistory, useNavigate } from '@reach/router'

  const curLocation = useLocation()
  const navigate = useNavigate()

  useEffect(() => {
    return globalHistory.listen(({ action, location }) => {
      if ((action === 'PUSH' && !location.pathname.includes('/verify/'))|| action === 'POP') {
        if(!window.confirm("Are you sure you want to exit video screening?")){
          navigate(`${curLocation.pathname}`)
        }
      }
    
    })
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

Answer 2

如果您想防止用户离开您的页面，您可以监听beforeunload event并在事件上调用preventDefault()。这不是特定于reach-router或gatsby的。

如果你想防止页面内部的意外导航，你可以使用reach-router的Link-component的onClick-prop。在那里，您可以触发状态比较并进行保存。如果你想停止导航，你也可以在事件上调用preventDefault。