Gatsby 重复数据输出/双重渲染

Question

我正在构建一个 Gatsby + Contentful 博客，并且在开发中一切正常。但是当我构建页面时，它会显示整个网站两次。

一切都应该在<div id="___gatsby"></div> 中。但它也会在<div id="___gatsby"></div> 之外再次呈现<main> 和<footer>（整个网站）

这是一张图片： gatsby renders entire website twice

我的 Layout.js 有问题吗？

Layout.js

import React from 'react'
import Navbar from './Navbar'
import BeforeFooter from './BeforeFooter'
import Footer from './Footer'

const Layout = ({ children }) => {
  return (
    <>
      <Navbar />
      <main>{children}</main>
      <BeforeFooter />
      <Footer />
    </>
  )
}

export default Layout

或者它可能是导致错误的插件？

gatsby-config.js

require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
})
module.exports = {
  siteMetadata: {
    title: `Gatsby Contentful Blog`,
    description: `Awesome Blog built with Gatsby and Contentful`,
    titleTemplate: `%s Contentful Blog`,
    url: `https://mdx-blog.netlify.app/`,
    image: `mainImg.png`,
    twitterUsername: `@john`,
  },

  plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-styled-components`,
    `gatsby-remark-images`,
    `gatsby-plugin-sass`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `assets`,
        path: `${__dirname}/src/assets`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `posts`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-source-contentful`,
      options: {
        spaceId: ``,
        // Learn about environment variables: https://gatsby.dev/env-vars
        accessToken: ``,
        forceFullSync: true,
      },
    },
    {
      resolve: `gatsby-plugin-prefetch-google-fonts`,
      options: {
        fonts: [
          {
            family: `Roboto`,
            variants: [`400`, `500`, `700`],
          },
          {
            family: `Open Sans`,
          },
          {
            family: `Teko`,
          },
        ],
      },
    },
    {
      resolve: `gatsby-plugin-gdpr-cookies`,
      options: {
        googleAnalytics: {
          trackingId: 'YOUR_GOOGLE_ANALYTICS_TRACKING_ID',
          // Setting this parameter is optional
          anonymize: true
        },
        facebookPixel: {
          pixelId: 'YOUR_FACEBOOK_PIXEL_ID'
        },
        // Defines the environments where the tracking should be available  - default is ["production"]
        environments: ['production', 'development']
      },
    },
  ],
}

我对这个堆栈非常陌生，我无法理解我做错了什么......让我知道你们是否可以帮助我或需要查看我的更多代码来提供帮助。

有人知道这是否是一个实际的布局问题吗？

Answer 1

您似乎在<Navbar>、<BeforeFooter>（似乎是这个）或<Footer> 组件中呈现<Layout> 组件。

<Layout> 还渲染 <NavBar>、<BeforeFooter> 和 <Footer> 组件，此外它们还可以渲染其他组件，包括渲染 <Layout>，因此在另一个组件中调用它们会重复（或更多）完整的布局。

尝试删除（或注释）<Layout> 中的每个组件以检查导致问题的原因，以便进行更多调试。