从标准React移植到Gatsby的重复标头组件

Question

我使用create-react-app创建了一个前端，并决定将其移至Gatsby.js。但是，组件Header.js显示两次。为什么会这样？

import React from 'react';
import Link from 'gatsby-link';
import Header from "../Components/Header";
import ThirdMenu from "../Components/ThirdMenu";
import Sidebar from "../Components/Sidebar";
import Good from '../Components/Good';
import ListPages from '../Components/ListPages';
import BestSellers from '../Components/BestSellers';
import Customers from '../Components/Customers';
import Footer from '../Components/Footer';

const IndexPage = () => (
    <div className="App">
      <Header />
      <ThirdMenu />

      <div className="Flex-container">
          <Sidebar />
          <Good />
      </div>
      <ListPages />
      <BestSellers />
      <Customers />
      <Footer />
      </div>

)

export default IndexPage

Answer 1

在srr/layouts/index.js删除组件标题中。

Answer 2

Gatsby为模板和页面提供了许多功能。例如，您经常会在src/layouts目录中看到包含index.jsx的文件。这些文件是layout components。

看一下您的GitHub repository，布局文件src/layouts/index.js包含您的标头和src/pages/index.js文件。您应该删除其中一个，很可能是src/pages/index.js中的<Header />。