如何在 Gatsby 中刷新当前页面？答案

【问题标题】：How do I refresh current page in Gatsby?如何在 Gatsby 中刷新当前页面？
【发布时间】：2021-04-12 12:23:11
【问题描述】：

我有一个包含指向不同页面的链接的菜单，但是当我单击指向我已经打开的页面的链接时，实际上什么也没有发生。我希望页面重新呈现，就好像用户从另一个页面点击一样。我试过了

navigate('/temp')
navigate(link, { replace: true })

但它不起作用。

【问题讨论】：

【解决方案1】：

简短的回答是，您不能使用 @reach/router 刷新同一页面（来自 React，而 Gatsby 是从它扩展而来的）。这是因为位置相同，所以对于内部路由，没有任何变化，因此不会强制刷新。

实现它的最简单方法是使用老式的window.location.reload()。这将刷新整个页面，强制重新渲染组件。

您可以关注this GitHub thread 了解更多信息。正如您所看到的，它可以通过深入history.pushState 和其他棘手的方式来实现，但它总是以令人头疼的方式结束，不建议这样做，因为它不是@reach/router 的目的，如果它蓬勃发展将有多个警告。

对于页面之间的标准内部导航，请使用<Link> 组件而不是navigate。

【讨论】：

这是一个有效的替代方案吗？ { import { globalHistory as history } from '@reach/router' const Layout = () => { const forceReload = history.location.state.sameLink ? { key: new Date() } : {} return }
可能，如果没有沙箱，就不可能知道它在所有浏览器或不同用例中的表现。
不用担心 :)。在沙盒中试一试，我们将尝试进行更多调试。但正如我所说，很难知道它是否适用于不同的用例或场景。