Как передавать данные между страницами в Gatsby?
Я пытаюсь передать данные при переходе на новую страницу в Gatsby (V2)
Я надеюсь, что тогда я смогу получить данные на этой странице. Это возможно? Я много исследовал это, но безуспешно, поэтому мне кажется, что я что-то упускаю ... Спасибо
Чего именно вы пытаетесь достичь?
Я хочу иметь возможность делать что-то вроде <Link to = '/ example' data = {id: 'xyz'} /> Чтобы на странице примера я мог визуализировать компонент с опорой id, например <Article id = 'xyz '/>
Страницы должны получить props.location, поэтому вы можете использовать параметры запроса, как и в любом другом приложении React.
Как мне получить доступ к реквизитам на странице. когда я пытаюсь выполнить console.info (this) или console.info (this.props), они оба не определены
Если страница является просто функцией, используйте переданный аргумент: export default ({ location }) => <div>{location.pathname}</div>
когда я console.info (местоположение), я получаю «search:? id = xyz». Это правильная идея ..? Я думаю я все еще в замешательстве
Ответы 1
Если вы хотите передать реквизиты, это может быть так же просто, как следующий пример из документации:
const PhotoFeedItem = ({ id }) => (
<div>
{/* (skip the feed item markup for brevity) */}
<Link
to = {`/photos/${id}`}
state = {{ fromFeed: true }}
>
View Photo
</Link>
</div>
)
const Photo = ({ location, photoId }) => {
if (location.state.fromFeed) {
return <FromFeedPhoto id = {photoId} />
} else {
return <Photo id = {photoId} />
}
}
Ссылка в документации включает яйцеголовый видеоролик о поведении, чтобы прояснить его.
https://www.gatsbyjs.org/docs/gatsby-link/#pass-state-as-props-to-the-linked-page
Вы также можете выполнить расширенную маршрутизацию с помощью создания страниц и программно сгенерировать страницы. Это немного более продвинуто, но полезно, если ваше приложение gatsby становится немного сложнее.
При обычном реагировании я бы включил его в маршрут, а затем получил бы доступ через this.props.location, например