0

我正在尝试在 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>
  );
}
4

1 回答 1

1

您在这里遇到的问题只是您没有为onClick处理程序定义回调函数。

而不是这个：

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

…你想这样做：

<button onClick={() => { navigate(-1) }}>Go Back</button>
于 2020-05-29T18:53:59.647 回答