Gatsby doesn't render components

Question

I'm trying to build simple page with nav, footer and component between them which content should be rendered depends of nav. Unfortunately only Home works fine (Nav and Footer are present). When I click to any other link in nav, Gatsby render just component with content without Nav and Footer (for instance just AboutUs).

My index.js code:

import React from "react";
import { Router } from "@reach/router";

{* import of other components *}

const App = () => (
    <div>
        <Nav />
        <Router>
            <Home path="/" />
            <AboutUs path="about" />
            <Projects path="projects" />
            <Join path="join" />
            <Contact path="contact" />
        </Router>
        <Footer />
    </div>
);

export default App;

And my Nav.js components looks like that:

import React from "react";
import { Link } from "gatsby";

import logo from "./assets/logoMain.svg";

const Nav = () => {
    const navNames = [
        { text: "about us", link: "about" },
        { text: "incoming trips", link: "travels" },
        { text: "join us", link: "join" },
        { text: "contact", link: "contact" },
    ];

    const navLinks = navNames.map((item) => (
        <Link to={item.link} key={item.link}>
            <span>{item.text}</span>
        </Link>
    ));

    return (
        <header>
            <Link to="./">
                <img src={logo} alt="Logo" />
            </Link>
            <div>{navLinks}</div>
        </header>
    );
};

export default Nav;

Are you intentionally doing client-side only routing and bypassing Gatsby? — coreyward, Dec 07 '20 at 22:32
You should really read some of the getting started documentation, like [this one that explains how to create pages based on a component and link between them](https://www.gatsbyjs.com/docs/recipes/pages-layouts#creating-pages-automatically). In short, you are reaching outside of Gatsby to do your own thing when you import Reach Router and start adding client-side routes like this. — coreyward, Dec 07 '20 at 22:35
Thanks for your answers. I forget to mention that I never used Gatsby before. I wrote my code as a CRA and than it was turns out that I have to migrate it to Gatsby, so I tried, but I can already see that I failed. Thank you for pointing me some documentation. I will try my luck there. — Rafal, Dec 08 '20 at 07:32

Ferran Buireu · Accepted Answer · 2020-12-09T06:42:18.297

By default, in Gatsby, all pages should be extended from the <Layout> component so, if you create a React structure like this in the <Layout> component:

const Layout = ({ children }) => {
  const data = useStaticQuery(graphql`
      query getSiteTitle {
          site {
              siteMetadata {
                  title
              }
          }
      }
  `);

  return  <section>
    <Header />
    <main>{children}</main>
    <footer>
      © {new Date().getFullYear()}, Built by
      {`your name`}
    </footer>
  </section>;
};

Every page that extends from this component will include the shared components (header, footer, etc). For example, on your AboutUs page:

const AboutUs = ({ data }) => {
  return <Layout>
    <h1>I'm your about us page</h1>    
  </Layout>;
};

In the snippet above, since <Header> and <footer> are present in <Layout> so that will be present in the AboutUs page too.

Gatsby doesn't render components

1 Answers1

Linked