Как получить предыдущий URL-адрес в реакции Гэтсби

Вы можете передать состояние с помощью компонента Link:

import React from 'react';
import { Link } from 'gatsby';

const PrevPage = () => (
  <div>
    <Link
      to = {`/nextpage`}
      state = {{ prevPath: location.pathname }}
    >
      Next Page
    </Link>
  </div>
)

const NextPage = (props) => (
  <div>
    <p>previous path is: {props.location.state.prevPath}</p>
  </div>
);

Тогда у вас есть доступ к prevPath из this.props.location.state на следующей странице.

Полный кредит Ответ @soroushchehresa - этот ответ просто дополнен.

Gatsby выдаст ошибку во время производственной сборки, поскольку location недоступен во время рендеринга на стороне сервера. Вы можете обойти это, сначала проверив объект window:

class Page extends React.Component {
  state = {
    currentUrl: '',
  }

  componentDidMount() {
    if (typeof window == 'undefined') return
    this.setState({ currentUrl: window.location.href })
  }

  render() {
    return (
      <Link to = "..." state = {{ prevUrl: this.state.currentUrl }}>
    )
  }
}

Но это требует, чтобы мы реализовывали это на каждой странице, что утомительно. Gatsby уже настроил @reach/router для рендеринга на стороне сервера, так что мы можем подключиться к его реквизитам location. Только компоненты маршрутизатора получают эти реквизиты, но мы можем использовать компонент @reach/routerLocation, чтобы передать его другим компонентам.

При этом мы можем написать собственный компонент Link, который всегда передает предыдущий URL-адрес в своем состоянии:

// ./src/components/link-with-prev-url.js

import React from 'react'
import { Location } from '@reach/router'
import { Link } from 'gatsby'

const LinkWithPrevUrl = ({ children, state, ...rest }) => (
  <Location>
    {({ location }) => (
                      //make sure user's state is not overwritten
      <Link {...rest} state = {{ prevUrl: location.href, ...state}}>
        { children }
      </Link>
    )}
  </Location>
)

export { LinkWithPrevUrl as Link }

Затем мы можем импортировать наш пользовательский компонент Link вместо Gatsby Link:

-  import { Link } from 'gatsby'
+  import { Link } from './link-with-prev-url'

Теперь каждый компонент страницы Gatsby получит эти предыдущие реквизиты URL:

const SomePage = ({ location }) => (
  <div>previous path is {location.state.prevUrl}</div>
);

Вы также можете рассмотреть возможность создания контейнера, в котором хранится состояние для клиентской стороны, и использовать wrapRootElement или wrapPageElement как в gatsby-ssr.js, так и в gatsby-browser.js.

Эти ответы частично верны. Если вы устанавливаете состояние с помощью Link API, то состояние сохраняется в истории браузера.

Итак, если вы перейдете от Page1 к Page2, то, например, state.prevUrl будет правильно установлено на Page1

Но если вы перейдете к Page3 из Page2, а затем снова выполните браузер, то state.prevUrl все равно будет Page1, что неверно.

Лучший способ справиться с этим — добавить что-то подобное в gatsby-browser.js.

export const onRouteUpdate = ({ location, prevLocation }) => {
  if (location && location.state)
    location.state.referrer = prevLocation ? prevLocation.pathname : null
}

таким образом, у вас всегда будет предыдущий URL-адрес, доступный на месте.

Я решил свою проблему с помощью приведенного ниже фрагмента кода. Вот реф ссылка https://github.com/gatsbyjs/gatsby/issues/10410

// gatsby-browser.js
exports.onRouteUpdate = () => {
  window.locations = window.locations || [document.referrer]
  locations.push(window.location.href)
  window.previousPath = locations[locations.length - 2]
}

Теперь вы можете получить previousPath доступ из любого места.