我如何 go 到蓋茨比的上一頁（history.goBack）

Question

我正在研究蓋茨比。 我需要 go 回到原來的頁面/鏈接，就像我以前用 reactjs 做的那樣。

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

我如何使用蓋茨比做到這一點？

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>
)

Answer 3

gatsby 導航功能的類型為 NavigateFn。

您可以找到聲明為：

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

因此，如您所見，您可以傳遞要重定向到的路由或特定號碼。

嘗試使用navigate(-1)

Answer 4

對於 Gatsby 中的函數組件：

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

Answer 5

這應該工作

import { navigate } from "@gatsbyjs/reach-router";

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

它轉到上一頁