Question

我正在研究盖茨比。我需要像以前使用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

编辑：好的，我刚刚意识到this.props.history.goBack是react-router的东西。盖茨比不使用react-router，但使用reach-router却没有history道具或goBack方法。 There's a issue requesting to add this，但尚未实现。您必须按照下面的建议使用浏览器自己的历史记录对象。

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>

如何前往gatsby（history.goBack）的上一页

4 个答案: