javascript - 如何前往gatsby(history.goBack)的上一页

我正在研究 Gatsby 。我需要返回到上一页/链接，就像我以前使用react js所做的那样。

<a onClick={() => this.props.history.goBack}>
  <button type="button" className="close_tab">
    <img src={Close} alt="" />
  </button>
</a>

如何使用gatsby做到这一点？

最佳答案

编辑:自[email protected]以来，您现在可以简单地调用navigate(-1)来返回。如果尚未更新，请在您的Gatsby项目中手动更新到达路由器。感谢@nathan在提示中的提示。

编辑:好的，我刚刚意识到this.props.history.goBack是react-router的东西。 Gatsby不使用react-router，但是在幕后使用reach-router，并且没有history Prop 或goBack方法。 There's a issue requesting to add this，但未实现。正如我在下面建议的那样，您必须使用浏览器自己的历史对象。

import React from 'react'

const BackButton = React.forwardRef(
  ({ children, ...props }, ref) => {
    const onClick = e => {
      e.preventDefault()
      history.back()
    }
    return (
      <a {...props} ref={ref} href="#" onClick={onClick}>
        {children}
      </a>
    )
  }
)

BackButton.displayName = 'BackButton'
export { BackButton }

this.props.history是浏览器的历史记录吗？如果是这样，您可以执行this.props.history.go(-1)返回上一页。

与Gatsby一样，当您使用浏览器中的方法时要当心，因为它们在html生成期间不存在:

export default () => (
  <button onClick={() => {
    typeof history !== 'undefined' && history.go(-1)
  }}>back</button>
)

关于javascript - 如何前往gatsby(history.goBack)的上一页，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55953185/