时间戳

首页 > 解决方案 > 仅使用 Gatsby Link 更改内容

gatsby - 仅使用 Gatsby Link 更改内容

问题描述

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

例如，如果我有：

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

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

我怎样才能做到只有内容被改变？

我注意到在 Gatsby 官方网站上就是这种行为，但实际上它似乎会加载并重新渲染整个下一页。您需要使用不同的组件吗？

例如，如果我有这三个文件：

布局.js

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

index.js

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

下一页.js

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

我期望标题内容不应在单击下一个链接时重新加载和呈现。因此，如果我通过 Web Inspector 更改标题的文本，我希望此文本不会更改，因为只有网页的一部分应该得到更新。您可以在 Gatsby 网站上进行测试，方法是编辑标题 HTML 的任何部分，然后四处浏览并查看标题 HTML 永远不会重新呈现……但是如何？

标签： gatsby

解决方案

这成为 Gatsby v2 中的默认行为，但我发现同样的事情：希望全局布局保持不变是很常见的。您可以使用官方gatsby-plugin-layout插件重新添加该功能。

运行以下命令：

npm install --save gatsby-plugin-layout

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

module.exports = {
  plugins: [

    // Etc…

    {
      resolve: `gatsby-plugin-layout`,
      options: {
        component: require.resolve(`./relative/path/to/layout/component`),
      },
    },

    // Etc…

  ],
}

…带有布局组件的路径。

更多背景：

推荐阅读