如何在 Gatsby 中添加后退按钮答案

【问题标题】：How to add a back button in Gatsby如何在 Gatsby 中添加后退按钮
【发布时间】：2016-12-30 16:56:43
【问题描述】：

如何添加不重新加载页面的后退按钮？

目前我有这个，它可以工作，但需要完全重新加载：

import { Link, browserHistory } from 'react-router'

<button onClick={browserHistory.goBack}>Back</button>

但我宁愿使用 React Router 中的链接返回而无需重新加载页面。

【问题讨论】：

看来你从这个问题stackoverflow.com/questions/30915173/…中得到了正确的想法
点击浏览器后退按钮是否也会导致页面重新加载？它们应该以相同的方式工作。
当我通过组件进入页面时，后退按钮无需重新加载页面即可工作。当我通过 Markdown 文件中的链接到达页面时，点击后退按钮会重新加载页面。当我使用浏览器的后退按钮时也是如此。
是的，不幸的是浏览器就是这样工作的。如果最后一次路径更改来自重新加载，那么无论如何点击后退按钮也会重新加载。
非常感谢凯尔

【解决方案1】：

这是我最终在我的 React 组件中使用的：

<button onClick={this.context.router.goBack}>Back</button>

如果你还想在不刷新页面的情况下在 Markdown 编写的页面之间进行转换，则需要修改 wrappers/md.jsx 文件：

感谢 Scott Nonnenberg 的 blog post 解释如何做到这一点。

【讨论】：

【解决方案2】：

最新版本的reach-router 支持这一点。您只需要添加以下代码即可创建后退按钮

                        <button onClick={()=>navigate(-1)}>Back</button>

干杯

【讨论】：