如何在导航上显示提示（GatsbyJS/ReachRouter）

Posted 2023-02-22

【中文标题】如何在导航上显示提示（GatsbyJS/ReachRouter）

【英文标题】：How to show prompt on navigation (GatsbyJS/ReachRouter)

【发布时间】：2020-04-08 01:36:06

【问题描述】：

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

我需要实现此功能的原因是我想比较页面第一次加载时的第一个状态和对该特定状态所做的操作（如果用户对其进行了一些输入）。基本上，我使用 Redux 作为我的状态（因为有很多组件，我不想一直向下和向下传递来自曾祖父组件的道具 - 这会很混乱）。

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

【参考方案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
  , []);

【参考方案2】：

如果您想阻止用户离开您的页面，您可以收听beforeunload event 并在事件中调用preventDefault()。这并非特定于到达路由器或 gatsby。

如果您想防止意外导航到您的页面，您可以使用到达路由器Link-component 的 onClick-prop。在那里，您可以触发状态比较并进行保存。如果您想停止导航，也可以在事件中调用preventDefault。

【讨论】：

我试过这个但它不起作用，我认为它与@reach/router 的架构方式有关，即使在将它添加到componentDidMount 之后，也没有任何东西被触发（甚至没有console.log 在那个 addEventListener 的回调中）。其实我放弃了，我暂时在做 YAGNI 哈哈。