Я довольно хорошо знаком с React.js
, но плохо знаком с Gatsby
.
Я хочу определить URL предыдущей страницы в Gatsby
?
Я довольно хорошо знаком с React.js
, но плохо знаком с Gatsby
.
Я хочу определить URL предыдущей страницы в Gatsby
?
Вы можете передать состояние вниз с помощью компонента 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
на следующей странице.
state
для Link
и передает значение, переданное ему компоненту страницы следующей страницы. Это задокументировано здесь. < / а>.
- person coreyward; 04.03.2019
Полный кредит на ответ @ 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 }}>
)
}
}
Но это требует, чтобы мы реализовали это на каждой странице, что утомительно. Гэтсби уже настроил @reach/router
для рендеринга на стороне сервера, поэтому мы можем подключиться к его location
реквизитам. Только компоненты маршрутизатора получают эти реквизиты, но мы можем использовать компонент Location
@reach/router
, чтобы передать его другим компонентам.
При этом мы можем написать настраиваемый компонент 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's 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>
);
Вы также можете подумать о создании контейнера, в котором хранится состояние для клиентской стороны, и использовать _11 _ или wrapPageElement
как в gatsby-ssr.js
, так и gatsby-browser.js
.
onRouteUpdate
API в gatsby-browser.js, который предоставляет location, prevLocation
, но, насколько я могу судить, он делает их доступными только для использования вне рамок моих компонентов Gatsby / React.
- person Victor; 04.03.2019
Эти ответы частично верны. Если вы устанавливаете состояние с помощью 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
доступ из любого места.
document.referrer
, я думаю. - person extempl   schedule 01.03.2019