Обновление: приведенное ниже исправлено, но я сталкиваюсь с подобной проблемой:
В моем шаблоне галереи (для страницы примера см. Здесь все загружается нормально, если перейти к через сайт. При refre sh родительский div сетки (GalleryGrid в styled-components) стирается / не укладывается / заменяется пустым div. Это на самом деле происходит после refre sh, во время гидратации Гэтсби.
Я попытался заменить стилизованный компонент обычным div, стилизованным вручную, но безуспешно. Не знаю, что происходит!
У меня действительно странная ошибка!
Я создал сайт с использованием Gatsby, источников из Prismi c .io и стилевых компонентов для стиля. Я использую framer-motion для переходов страниц и добавил свой компонент макета в gatsby-browser, чтобы получать только содержимое страницы и добавил аналогичный код в gatsby-ssr для исправления некоторых начальных ошибок ssr.
В настоящее время происходит то, что всякий раз, когда страница, отличная от индекса, посещается, dir (попробуйте this ), некоторые компоненты не отображаются должным образом. В этом примере дата в верхней части страницы заменяется компонентом <Body> (стиль которого отличается от предполагаемого компонента <Date>), а фактическое содержимое было усечено и отображает только первый <p>.
Если вы перейдете в раздел «портфолио», а затем вернетесь к странице каталога, страница будет отображаться правильно - дата теперь является компонентом <Date>, и отображается весь основной текст.
Аналогичная ошибка возникает с узлами «эссе» - например, на этой странице изображение предназначено для компонента ImageContainer, но заменяется дополнительным EssayContainer при обновлении или доступе напрямую (вместо перехода на страницу с помощью навигации по сайту).
Я, честно говоря, понятия не имею, что здесь происходит или что может быть причиной этой ошибки - сделал ли я что-то не так или это ошибка в Gatsby's SSR или styleled-компоненты / плагин gatsby S C. Он работает, как и ожидалось, при запуске gatsby develop, поэтому должно быть что-то в сборке или SSR.
Мой браузер gatsby:
const transitionDelay = 500
export const wrapPageElement = ({ element, props }) => {
return <Layout {...props}>{element}</Layout>
}
export const shouldUpdateScroll = ({
routerProps: { location },
getSavedScrollPosition,
}) => {
if (location.action === "PUSH") {
window.setTimeout(() => window.scrollTo(0, 0), transitionDelay)
} else {
const savedPosition = getSavedScrollPosition(location)
window.setTimeout(
() => window.scrollTo(...(savedPosition || [0, 0])),
transitionDelay
)
}
return false
}
И мой gatsby-ssr:
const transitionDelay = 500
export const wrapPageElement = ({ element, props }) => {
return <Layout {...props}>{element}</Layout>
}
И мой репо здесь .
Любая помощь очень ценится!