Как перейти на предыдущую страницу в gatsby (history.goBack)

Question

Я работаю над Гэтсби.Мне нужно вернуться на предыдущую страницу / ссылку, как я делал это с реактивом.

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

Как я могу сделать это, используя gatsby?

Answer 1

Редактировать : Ладно, я только что понял, this.props.history.goBack это react-router вещь. Гэтсби не использует react-router, но reach-router под капотом, и у него нет реквизита history или goBack. Есть проблема, требующая добавить это , но она не была реализована. Вам придется использовать собственный объект истории браузера, как я предложил ниже.

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