Browser 浏览器后退按钮不适用于gatsby.js项目

有人知道在盖茨比项目中使用标准链接标记时，什么会导致“后退”按钮不起作用吗

url会更改，但路由不会更新

这是一个盖茨比源wordpress项目，如果这有助于了解。所有的wp页面都是用createPage方法创建的，并且一切都像预期的那样工作

相反，我有另一个盖茨比项目，它不使用wordpress源代码。在该项目上，“浏览器后退”和“前进”按钮工作正常。所以很明显，盖茨比自己并不是在默认情况下打破了这一点。但在我的检查中，我看不到两个项目配置或其他任何东西会导致这种情况的根本原因。除了源wordpress部分，它们几乎完全相同

---

其他人遇到过类似的情况吗？

好吧，对于其他经历过这种情况的人来说——毫无疑问，你的谷歌搜索让你发疯了。我们怎么可能是唯一处理过这件事的人？的确，令人愤怒

别担心，有一个黑客。是的，我肯定这是一个彻底的黑客

在gatsby-browser.js文件中，添加以下内容：

exports.onInitialClientRender = () => {
  window.addEventListener('popstate', () =>
    window.location.href = window.location.href
  )
}

你问，这是干什么的？它强制url重定向到自身。听起来很傻，对吧？它是，但这仅在使用浏览器的导航时触发。问题解决了，对吗？不，不是真的。问题被掩盖了。但对我来说，这已经足够好了，直到有人有了真正的答案

为什么这个解决方案很糟糕？因为它打破了温泉的概念。如果你在那里强制重新加载，你就不再是一个页面了。对我来说，我不太担心，因为这只发生在后退和前进按钮点击。但如果这是一个5万美元的客户，我肯定我的小黑客不会和他们一起飞

---

如果任何人有一个实际的盖茨比解决方案，不打破水疗模型，张贴在这里，我会很高兴地转移接受的答案给你。在那之前。。。继续吧。

好吧，对于其他经历过这种情况的人来说——毫无疑问，你的谷歌搜索让你发疯了。我们怎么可能是唯一处理过这件事的人？的确，令人愤怒

别担心，有一个黑客。是的，我肯定这是一个彻底的黑客

在gatsby-browser.js文件中，添加以下内容：

exports.onInitialClientRender = () => {
  window.addEventListener('popstate', () =>
    window.location.href = window.location.href
  )
}

你问，这是干什么的？它强制url重定向到自身。听起来很傻，对吧？它是，但这仅在使用浏览器的导航时触发。问题解决了，对吗？不，不是真的。问题被掩盖了。但对我来说，这已经足够好了，直到有人有了真正的答案

为什么这个解决方案很糟糕？因为它打破了温泉的概念。如果你在那里强制重新加载，你就不再是一个页面了。对我来说，我不太担心，因为这只发生在后退和前进按钮点击。但如果这是一个5万美元的客户，我肯定我的小黑客不会和他们一起飞

---

如果任何人有一个实际的盖茨比解决方案，不打破水疗模型，张贴在这里，我会很高兴地转移接受的答案给你。在那之前。。。继续。

我也遇到了这个问题。要找到根本原因真是太麻烦了

我建议你也去看看，那里有其他的解决办法

@Gurpretatwal建议将此添加到gatsby-browser.js：

根据他的解释，@reach/router和Gatsby可能存在问题，其中转换状态设置为true，并导致@reach/router替换历史，而不是推送历史。onTransitionComplete仅在@reach/router的onComponentDidUpdate中调用，在导航中不经常调用。我将根据这个问题进行更多的解释和更新

我推断，此修复程序支持调用onTransitionComplete，并允许在页面更改时推送到历史记录

我试过你的解决方案，也试过@Gupretatwal的。@gupreetatwa解决方案的主要好处是它不会导致整页刷新。现在仍然感觉像一个黑客，但这至少是另一个尝试的途径

---

这个问题花费了我们几天的时间，所以希望这能为其他人节省一些时间。

我也遇到了这个问题。要找到根本原因真是太麻烦了

我建议你也去看看，那里有其他的解决办法

@Gurpretatwal建议将此添加到gatsby-browser.js：

根据他的解释，@reach/router和Gatsby可能存在问题，其中转换状态设置为true，并导致@reach/router替换历史，而不是推送历史。onTransitionComplete仅在@reach/router的onComponentDidUpdate中调用，在导航中不经常调用。我将根据这个问题进行更多的解释和更新

我推断，此修复程序支持调用onTransitionComplete，并允许在页面更改时推送到历史记录

我试过你的解决方案，也试过@Gupretatwal的。@gupreetatwa解决方案的主要好处是它不会导致整页刷新。仍然感觉像一个hac 现在是k，但这至少是另一种尝试的途径

---

这个问题花费了我们几天的时间，所以希望这能为其他人节省一些时间。

我在我的项目中遇到了同样的问题，但不是每个链接都有。我尝试应用这里提到的解决方案，但它有一个缺点，返回时会重新加载所有内容。我继续研究，发现了一些疯狂但有效的东西

让我知道这是否对你有效

我使用WordPress网站作为源。我在做：

<Link to={`/help/${node.slug}/`}>{node.title || null}</Link>

已修复移除las/的问题。像这样：

<Link to={`/help/${node.slug}`}>{node.title || null}</Link>

---

我在我的项目中遇到了同样的问题，但不是每个环节都有。我尝试应用这里提到的解决方案，但它有一个缺点，返回时会重新加载所有内容。我继续研究，发现了一些疯狂但有效的东西

让我知道这是否对你有效

我使用WordPress网站作为源。我在做：

<Link to={`/help/${node.slug}/`}>{node.title || null}</Link>

已修复移除las/的问题。像这样：

<Link to={`/help/${node.slug}`}>{node.title || null}</Link>

---

我会试试这个。如果有效的话，我会把接受的答案转给你。谢谢我会试试这个。如果有效的话，我会把接受的答案转给你。谢谢