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;

Answer 1

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.