Использование «Navigate (-1)» не позволяет вернуться к предыдущему местоположению в Gatsby

Question

Я пытаюсь создать простую кнопку «Назад» в Gatsby, которая возвращает предыдущую страницу и сохраняет позицию прокрутки. Это уже происходит при использовании кнопки возврата в браузере, но я изо всех сил пытаюсь создать собственную. Я читал в документации по маршрутизатору Reach Router, что вы можете добавить -1 в качестве аргумента функции навигации, чтобы вернуться в предыдущие местоположения, но вместо этого он выбрасывает числовое значение в URL-адрес и дает мне 404. Может кто-нибудь дать мне идею что я сделал не так? Или кому-то еще удалось сделать функциональную кнопку возврата для проектов Gatsby?

Вот мой код -

import React from 'react';
import { graphql, navigate } from 'gatsby'
import Img from "gatsby-image"

import "./design.scss"

const designTemplate = (props) => {
  return (
      <section className="design">
        <div className="design__container">
        <h2 className="design__title">
          {props.data.design.title}
        </h2>
        <Img className="design__image" fluid={props.data.design.localImage.childImageSharp.fluid} />
        <p className="design__summary">
          {props.data.design.summary}
        </p>
        </div>
        <button onClick={navigate(-1)}>Go Back</button>
      </section>
  );
}

Answer 1

Проблема, с которой вы столкнулись, заключается в том, что вы не определили функцию обратного вызова для своего onClick обработчика.

Вместо этого:

<button onClick={navigate(-1)}>Go Back</button>

… вы хотите сделать это:

<button onClick={() => { navigate(-1) }}>Go Back</button>