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

问题描述

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

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

我的 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']
      },
    },
  ],
}

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

任何人都知道它是否是一个实际的布局问题？

标签： reactjsgatsbycontentful

似乎您正在渲染<Layout>内部的组件<Navbar>，<BeforeFooter>（似乎是这样）或<Footer>组件。

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

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

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

问题描述

解决方案

推荐阅读