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

时间:2019-12-15 08:13:31

标签: javascript reactjs ecmascript-6 redux react-redux

是否可以在离开页面之前显示页面确认?我当前正在使用GatsbyJS/@reach-router。我看到的所有帖子都很容易在react-router中完成,但是我从未见过在当前使用的框架中实现。

之所以需要实现此功能,是因为我想比较页面首次加载时的第一个状态和对该特定状态所做的操作(如果用户向其输入了一些内容)。基本上,我使用Redux作为状态(因为有很多组件,而且我不想一直从伟大的祖父母组件中向下和向下方传递道具-会很混乱)。

因此,我只是想抛出一个确认/模式,以防他们进行了一些更改并且错误地导航了(以便我们可以保存数据...)。我们如何实现呢?感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

如果您想阻止用户浏览您的页面,您可以听beforeunload event并在事件中致电preventDefault()。这并非仅适用于到达路由器或gatsby。

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