Gatsby 不渲染组件

Gatsby doesn't render components

我正在尝试使用导航、页脚和它们之间的组件构建简单的页面,应该根据导航呈现哪些内容。不幸的是,只有 Home 可以正常工作(存在 Nav 和 Footer)。当我点击导航中的任何其他 link 时,Gatsby 只呈现没有导航和页脚的内容组件(例如只是关于我们)。

我的index.js代码:

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;

我的 Nav.js 组件看起来像这样:

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;

默认情况下,在 Gatsby 中,所有页面都应该从 <Layout> 组件扩展,因此,如果您在 <Layout> 组件中创建这样的 React 结构:

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>;
};

从此组件扩展的每个页面都将包含共享组件(页眉、页脚等)。例如,在您的 AboutUs 页面上:

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

在上面的代码片段中,由于 <Header><footer> 出现在 <Layout> 中,所以它们也会出现在 AboutUs 页面中。