Как правильно установить домашнюю страницу Gatsby.js?

Question

Я создаю многостраничный веб-сайт (так, многокомпонентный) с помощью Gatsby.В официальной документации говорится, что в папке Layouts у меня должен быть файл index.js, в котором хранятся компоненты, общие для других страниц (например, панель навигации и нижний колонтитул, действующие как реагирующий маршрутизатор, называемый здесь MainNavBar и MainFooter).Теперь файл index.js также является домашней страницей и целевой страницей, когда вы обращаетесь к местоположению localhost: 8000 (после загрузки будет www.mywebsite.com).Проблема заключается в том, что сейчас эта страница пуста, и после выбора страницы на веб-сайте отображаются только дочерние элементы (), которые хранятся в папке страниц.Однако, если я создам внутри него компонент, такой как домашняя страница (которая теперь хранится как home.js в папке страниц), остальные страницы отображаются под домашней страницей, и сама домашняя страница будет общей для всехдругие страницы, что делает невозможным правильное отображение компонентов.Как правильно создать домашнюю страницу, которая будет также целевой страницей, сохраняющей эту конфигурацию?

это компонент index.js

import Helmet from 'react-helmet'
import MainNavBar from '../components/navbar.js';
import Footer from '../components/footer';
import React, { Component } from 'react';
import logo from '../images/recsenz.png';
import tile1 from '../images/tile_imgs/prova(m).png';
import tile2 from '../images/tile_imgs/prova(d).png';
import tile3 from '../images/tile_imgs/prova(x).png';
import { Card, CardImg, CardText, CardBody,
   CardTitle, CardSubtitle, Button, Col, Row, Container } from 'reactstrap';
import PropTypes from 'prop-types';
import 'bootstrap/dist/css/bootstrap.min.css';


import './index.css'


const Layout = ({ children, data }) => (
  <div>
    <Helmet
      title={data.site.siteMetadata.title}
      meta={[
        { name: 'description', content: 'Sample' },
        { name: 'keywords', content: 'sample, something' },
      ]}
    />
    <MainNavBar />
      {children()}
    <Footer />      
  </div>
)

Layout.propTypes = {
  children: PropTypes.func,
}

export default Layout

export const query = graphql`
  query SiteTitleQuery {
    site {
      siteMetadata {
        title
      }
    }
  }
`