javascript - 如何在 gatsby (history.goBack) 中转到上一页

Question

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

<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 项目中的到达路由器。感谢@nathan 在评论中提供提示。

---

编辑：啊好吧，我刚刚意识到this.props.history.goBack是一react-router件事。盖茨比不使用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>
)

Answer 3

对于 Gatsby 中的函数组件：

   <a onClick={() => window.history.back()}>Go back</a>

Answer 4

gatsby 导航函数的类型为 NavigateFn。

您可以找到声明为：

export interface NavigateFn {
    (to: string, options?: NavigateOptions<{}>): Promise<void>;
    (to: number): Promise<void>;
}

因此，如您所见，您可以传递要重定向到的路线，也可以传递特定号码。

尝试navigate(-1)