Гэтсби: рендеринг новых детей без повторного рендеринга другого элемента в макете

Question

Я использую Гэтсби с gatsby-plugin-layout для моего строительного сайта. Я создаю макет по умолчанию на 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

И на своей дочерней странице я НЕ оборачиваю свою страницу компонентом Layout, например:

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

Поэтому, когда я изменяю children (например, нажмите на ссылку, чтобы переключиться на другой маршрут), я не хочу повторно отображать другой компонент в макете (например: верхний колонтитул, нижний колонтитул ...) .
Как я могу это сделать?
Спасибо.