Reactjs 盖茨比：在不重新渲染布局中的另一个元素的情况下渲染新的子元素

我正在使用盖茨比的

盖茨比插件布局

来构建我的网站。我在

src/layouts/index.js

创建默认布局，如下所示：

const Layout = ({ children }) => {
    const data = useStaticQuery(graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)

    return (
        <ContextProviderComponent>
            <Header siteTitle={data.site.siteMetadata.title} />
            <div
                style={{
                    margin: `0 auto`,
                    maxWidth: 960,
                    padding: `0px 1.0875rem 1.45rem`,
                    paddingTop: 0,
                }}
            >
                <main>{children}</main>
                <Footer />
            </div>
        </ContextProviderComponent>
    )
}

Layout.propTypes = {
    children: PropTypes.node.isRequired,
}

export default Layout

因此，当我更改

子项时（例如：单击链接切换到另一个路由），我不想在布局中重新渲染另一个组件（例如：页眉、页脚…。

我该怎么做？

谢谢。
将页眉和页脚放在索引组件中，我看到您已经在这样做了。那么，什么不起作用？错误？@Z.Zlatev：没有错误。我只想
Header
和
Footer
在路由更改时
{children}
更改时不会重新渲染。请将页眉和页脚放入索引组件中，我看到您已经在这样做了。那么，什么不起作用？错误？@Z.Zlatev：没有错误。我只想
Header
和
Footer
在路由更改时
{children}
更改时不重新渲染。
const SecondPage = () => (
  <>
    <SEO title="Page two" />
    <h1>Hi from the second page</h1>
    <p>Welcome to page 2</p>
    <Link to="/">Go back to the homepage</Link>
  </>
)

export default SecondPage