Я использую Гэтсби с 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
(например, нажмите на ссылку, чтобы переключиться на другой маршрут), я не хочу повторно отображать другой компонент в макете (например: верхний колонтитул, нижний колонтитул ...) .
Как я могу это сделать?
Спасибо.