如何在gatsby.js中拦截导航

Question

在我的GatsbyJs页面上，当用户试图导航离开页面时，我想显示一个对话框，让用户可以选择取消导航

我不知道如何在盖茨比中做到这一点

有什么提示吗？

提前感谢

Answer 1

我不确定你的规格，但你可以试着放一个"假的"；链接，它用两个按钮(确定/导航和KO/关闭(触发模式，并且是OK按钮执行导航，而KO按钮取消模式。

类似于：

const SomePage = () => {
const handleClick = (to) => {
//open modal here
//if the user clicks the OK button
navigate(to);
};
return (
<section>
<p>Some Content</p>
<div onClick={() => (handleClick = "/some-url")}>Fake Link</div>
</section>
);
};

关于navigate函数的更多详细信息：https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-link/#how-使用导航助手功能