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

Question

任何人都知道在gatsby项目中使用标准Link标签时会导致后退按钮无法工作的原因是什么？

网址会更改但路由不会更新。

这是一个gatsby源wordpress项目，如果这有助于知道。所有wp页面都是使用createPage方法创建的，所有内容似乎都按预期工作。

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

还有其他人遇到过这样的事吗？

Answer 1

我也遇到过这个问题。找到根本原因是一件很麻烦的事。

我建议还要查看this GitHub issue，其中提出了另一种解决方法。

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

import {globalHistory} from '@reach/router';
export const onInitialClientRender = () => {
  /**
   * This is a workaround for a bug in Gatsby
   *
   * See https://github.com/gatsbyjs/gatsby/issues/8357 for more details
   */
  globalHistory._onTransitionComplete();
}

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

我推断的是，这个修复程序可以调用_onTransitionComplete()并允许在页面更改时推送历史记录。

我尝试了你的解决方案以及@ gupreetatwal的。 @gupreetatwa解决方案的主要优点是它不会导致整页刷新。现在仍感觉像是一个黑客，但它至少是另一种尝试的途径。

这个问题花了我们几天，所以希望这可以节省其他时间。

Answer 2

好吧，对于其他任何经历过这种情况的人 - 毫无疑问，你的谷歌搜索让你疯狂。我们怎么能成为唯一一个处理过这个问题的人呢？确实，真气。

不用担心，有一个黑客。是的，我确信这完全是黑客攻击。

在你的gatsby-browser.js文件中，添加：

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

WTF是这样做的，你问？它迫使网址重定向到自己。听起来好吧，对吗？它是，但只有在您使用浏览器的导航时才会触发。问题解决了吧？不，不是真的。问题被掩盖了。但对我来说，这是足够好的，直到有人得到实际答案。

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

如果有人有一个实际的Gatsby解决方案不会打破SPA模型，请在此发布，我很乐意将接受的答案转发给您。直到那时......黑客攻击。