Как установить состояние над страницами в Гэтсби

Question

Учитывая, что Gatsby создает страницы автоматически при добавлении файлов компонентов в папку, как мне создать компонент с более высоким порядком состояний над страницами, чтобы я мог контролировать состояние для навигации и других общихуниверсальные компоненты?

Или мы должны создать индивидуальное состояние внутри компонентов страницы, даже если это означает повторение?

Спасибо

Answer 1

Вы можете использовать wrapPageElement или wrapRootElement API в gatsby-browser.js и gatsby-ssr.js для достижения этой цели.

• wrapPageElement предназначен для постоянного компонента пользовательского интерфейса, то есть компонентов, которые не следует отключать при смене страницы. Например, собственный плагин макета , созданный gatsby , использует этот API-интерфейс для переноса всего содержимого страницы в определяемый пользователем компонент Layout (это было поведение по умолчанию в gatsby 1).

• wrapRootElement предназначен для провайдера данных. Например, если вы хотите использовать избыточный или тему стилевого компонента, вы можете обернуть их компонент поставщика с помощью этого API.

gatsby-browser.js будет работать только в браузерах, в то время как gatsby-ssr.js будет работать во время генерации страницы, поэтому вполне вероятно, что вы захотите использовать оба apis одновременно.