如何转到 gatsby 中的上一页 (history.goBack)

Question

我正在研究盖茨比。我需要像以前使用 reactjs 一样返回隐私页面/链接。

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

我怎样才能使用 gatsby 做到这一点？

Answer 1

使用navigate(-1)：

import React from "react";
import { navigate } from "gatsby";

export default function GoBack() {
  return (
    <Button onClick={() => navigate(-1)}>
      Go Back
    </Button>
  );
}

Answer 2

编辑：因为reach-router@1.3.0，你现在可以简单地打电话navigate(-1)回去。如果尚未更新，请手动更新 Gatsby 项目中的reach-router。感谢@nathan 在评论中的提示。

编辑：啊好吧，我刚刚意识到this.props.history.goBack是react-router一回事。Gatsby 不使用react-router, 但reach-router在幕后，它没有history道具或goBack方法。有一个问题要求添加 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>
)