Gatsby 仅使用盖茨比链接更改内容

我正在使用GatsbyJS来构建一个站点，但我希望路由器的行为会稍有不同，因为它的行为更像SPA中的路由器，只会更改已更改的内容，而不会重新加载整个页面

例如，如果我有：

<Link to="/next-page/">Go to Next Page</Link>

转到下一页

这将加载整个下一页并重新呈现所有内容。包括标题、布局等

我怎样才能做到只更改内容

我注意到，在盖茨比官方网站上，这种行为确实如此，但实际上，它似乎加载并重新呈现了整个下一页。您需要使用不同的组件吗

例如，如果我有以下三个文件：

layout.js

<div>
   <header>Header</header>
   <main>{children}</main>
</div>

标题
{儿童}

index.js

<Layout>
  <Link to="/next-page/">Go to Next Page</Link>
</Layout>

转到下一页

next-page.js

<Layout>
  <Link to="/">Go to First Page</Link>
</Layout>

转到第一页

---

我希望标题内容不应该在点击下一个链接时重新加载和呈现。因此，如果我通过Web检查器更改了标题的文本，我希望此文本不会更改，因为只有Web页面的一部分应该得到更新。你可以在盖茨比网站上测试这一点，方法是编辑标题HTML的任何部分，然后四处导航，看看标题HTML永远不会被重新呈现。。。但是如何做呢？

这些可以通过以下方式完成：

const layout = (props) => {
    return (
      <Header />
      <Content
         {...props}
      />
      <Footer />
    )
}

Content.js

const header = () => {
  return (
    <div>
     <p>some text</p>
    </div>
  )
}

const content = (props) => {
  return (
    <div>{ props.children } </div>
  )
}

const footer = () => {
  return (
    <div>
     <p> some footer </p>
    </div>
  )
}

页眉、内容和页脚是独立的组件

您将对整个页面使用then布局模板，并且在所有站点上都有相同的页眉和页脚。
这成为Gatsby v2中的默认行为，但我发现同样的事情：希望全局布局保持不变是很常见的。您可以在官方插件中添加该功能

运行以下命令：

npm安装——保存盖茨比插件布局

将插件添加到您的
gatsby config.js
plugins数组：

module.exports={
插件：[
//等等…
{
解析：`gatsby插件布局`，
选项：{
组件：require.resolve（`./relative/path/to/layout/component`），
},
},
//等等…
],
}

…带有布局组件的路径

更多背景：




这不是我要问的。我已经在每页上有相同的标题。问题是，如何让链接组件像盖茨比网站那样将下一页加载到内容中，而不是进行整页加载或使用自定义Ajax。您可以查看：Github代码：这不是使用Ajax加载内容