我遇到了一个问题，让SimpleLightbox不加载我，直到我刷新我的盖茨比网站上的页面。我有一个演示，如果你从“灵感”页面（https://effulgent-liger-a1d01e.netlify.app/inspiration）然后点击一个单独的灵感，你会看到通过点击画廊中的照片，它只是打开照片的网址，而不是灯箱。然后如果你刷新页面并点击图库中的一张图片，它就会很好地加载灯箱。我想这是我盖茨比学习过程的一部分，但在这一点上被难住了。谢谢任何帮助。
这里是我个人的“灵感”后文件代码。

import React from 'react'
import styled from 'styled-components'
import { GatsbyImage } from 'gatsby-plugin-image'
import SimpleLightbox from 'simple-lightbox'

import 'simple-lightbox/dist/simpleLightbox.min.css'

import Seo from "../components/seo"
import CTAOne from '../components/ctaOne'

const HeroSection = styled.section`
  height: 650px;
  position: relative;

  @media(min-width: 768px) {
    height: 825px;
  }

  .hero-image .gatsby-image-wrapper {
    width: 100%;
    height: 650px;
    object-fit: cover;
    object-position: center;

    @media(min-width: 768px) {
      height: 825px;
    }
  }

  .hero-content {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    text-align: center;
    width: calc(100% - 20px);
    max-width: 1160px;
    padding: 15px 0;
    background-color: var(--white-trans);

    .hero-border-top,
    .hero-border-bottom {
      height: 18px;
      width: 100%;
      border: 6px solid var(--white-trans);
    }

    .hero-border-top {
      margin-top: -33px;
    }

    .hero-border-bottom {
      margin-bottom: -33px;
    }

    h1 {
      margin-bottom: 0;
    }

    p {
      font-size: 21px;
      line-height: 1.2;
      width: 100%;
      max-width: 900px;
      margin: 25px auto 21px auto;
      padding-left: 10px;
      padding-right: 10px;

      @media(min-width: 768px) {
        font-size: 23px;
      }
    }
  }
`

const InspirationPostContainer = styled.section`
  margin-bottom: 90px;

  .inspiration-desc {
    max-width: 850px;
    margin: 90px auto 85px auto;
    text-align: center;
  }

  .inspiration-grid {
    column-count: 1;
    column-gap: 55px;

    @media(min-width: 640px) {
      column-count: 2;
    }

    @media(min-width: 992px) {
      column-count: 3;
    }
  }

  .item {
    margin: 0 0 40px;
    display: grid;
    grid-template-rows: 1fr auto;
    break-inside: avoid;
  }

  .item > img {
    grid-row: 1 / -1;
    grid-column: 1;
  }
`

function InspirationPost({ pageContext }) {
  const { inspiration } = pageContext

  if (typeof window !== `undefined`) {
    new SimpleLightbox({elements: '.inspiration-grid a'})
  }

  return (
    <>
      <HeroSection>
          <div className='hero-image'>
            <GatsbyImage image={inspiration.inspiration.projectFeaturedPhoto.gatsbyImage} alt={inspiration.inspiration.projectFeaturedPhoto.altText} />
          </div>
          <div className="hero-content">
            <div className='hero-border-top'></div>
            <h1>{inspiration.inspiration.projectTitle}</h1>
            <div className='hero-border-bottom'></div>
          </div>
      </HeroSection>
      <InspirationPostContainer>
        <div className="container">
          <div className='inspiration-desc'>{inspiration.inspiration.projectDescription}</div>
          <h2>Project Gallery</h2>
          <div className='inspiration-grid'>
            {inspiration.inspiration.projectGallery.map((node) => (
              <a href={`${node.mediaItemUrl}`} className='item' key={node.id}>
                <GatsbyImage image={node.gatsbyImage} alt={node.altText} />
              </a>
            ))}
          </div>
        </div>
      </InspirationPostContainer>
      <CTAOne />
    </>
  )
}

export default InspirationPost