时间戳

首页 > 解决方案 > 浏览器后退按钮不适用于 gatsby.js 项目

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

问题描述

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

url 改变了，但是路由没有更新。

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

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

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

标签： browsergatsby

解决方案

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

我还建议您查看这个 GitHub 问题，其中提出了另一种解决方法。

@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仅在onComponentDidUpdate@reach/router 中调用，导航中不常调用。我将推迟该问题以获得更多解释和更新。

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

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

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

推荐阅读