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

Question

是否可以在离开页面之前显示页面确认？我目前正在使用GatsbyJS/@reach-router. 我看到的所有帖子都是如何轻松地做到这一点，react-router但我从未在我当前使用的框架中看到过实现。

我需要实现这个的原因是我想比较页面第一次加载的第一个状态以及对此特定状态所做的操作（如果用户向其输入了一些输入）。基本上，我使用 Redux 作为我的状态（因为有很多组件，我不想继续从曾祖父组件向下传递 props - 这会很混乱）。

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

Answer 1

如果您想阻止用户离开您的页面，您可以监听beforeunload 事件并调用preventDefault()该事件。这并非特定于reach-router 或gatsby。

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