如何在 Gatsby 中添加后退按钮

Posted 2023-02-21

【中文标题】如何在 Gatsby 中添加后退按钮

【英文标题】：How to add a back button in Gatsby

【发布时间】：2016-12-30 16:56:43

【问题描述】：

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

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

import  Link, browserHistory  from 'react-router'

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

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

【问题讨论】：

看来你从这个问题***.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>

干杯

【讨论】：

你可以加import navigate from "gatsby";