Gatsby 不渲染组件

Question

我正在尝试使用导航、页脚和它们之间的组件构建简单的页面，应该根据导航呈现哪些内容。不幸的是，只有 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;

Answer 1

默认情况下，在 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 页面中。

Gatsby 不渲染组件

Gatsby doesn't render components

reactjs

gatsby

reach-router