Question

有人知道在gatsby项目中使用标准链接标签时，后退按钮不起作用的原因吗？

网址已更改，但路由未更新。

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

相反，我还有另一个不使用wordpress来源的gatsby项目。在该项目上，浏览器的前进和后退按钮可以正常工作。因此很明显，并不是默认情况下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替换历史记录而不是 em> push 进入历史。 onTransitionComplete仅在@ reach / router的onComponentDidUpdate中被调用，在导航中通常不被调用。我会参考此问题以获取更多说明和更新。

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

我尝试了您的解决方案以及@gupreetatwal的解决方案。 @gupreetatwa解决方案的主要优点是它不会引起整页刷新。现在仍然感觉像是黑客，但这至少是另一种尝试的方法。

此问题使我们花费了几天的时间，因此希望这可以节省其他时间。

Answer 2

好吧，对于其他任何经历过的人-毫无疑问，您的谷歌搜索使您发疯。我们如何才能成为唯一处理过此问题的人？确实，真气。

不用担心，这里有黑客。是的，我确定这完全是黑客。

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

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

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

为什么这种解决方案很烂？因为它打破了SPA的概念。如果您在那里强制重新加载，则不再是单页。对我来说，我并不太担心，因为这仅发生在后退和前进按钮单击上。但是，如果这是一个价值5万美元的客户，我肯定我的小技巧不会与他们同在。

如果任何人都拥有不破坏SPA模型的实际盖茨比解决方案，请将其张贴在此处，我很乐意将已接受的答案转移给您。直到......继续。

Answer 3

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

让我知道这是否对您有用。

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

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

已修复删除las“ /”的问题。像这样：

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

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

3 个答案: