reactjs - 使用“Navigate(-1)”无法返回 Gatsby 中的先前位置
问题描述
我正在尝试在 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>
);
}
解决方案
您在这里遇到的问题只是您没有为onClick
处理程序定义回调函数。
而不是这个:
<button onClick={navigate(-1)}>Go Back</button>
…你想这样做:
<button onClick={() => { navigate(-1) }}>Go Back</button>
推荐阅读
- delphi - 无法将 Indy 更新到最新版本
- c# - 如何序列化/反序列化 IList 集合的类包装器?
- javascript - NightwatchJS 无法使用 CSS 选择器定位元素
- python - 嵌套函数内的 cProfile
- ruby-on-rails - Friendly_ID 只返回一个对象,当许多对象匹配查找条件时
- python - 如何在 Rest Framwork 中将两个表的数据合并为 JSON?
- vba - Excel 查找多个文件并附加到电子邮件
- c++ - 来自简单循环的 OpenAcc 错误:内核执行期间的非法地址
- c# - LiteDB 集合返回但查询返回 null
- android - 错误:(26, 13) 无法解决:com.android.support:appcompat-v7:27.+