盖茨比不渲染组件 [英] Gatsby doesn't render components

问题描述

我试图建立一个简单的页面与导航，页脚和组件之间的哪些内容应该被呈现取决于导航。不幸的是，只有Home才能正常工作(NAV和Footer都存在)。当我点击NAV中的任何其他链接时，Gatsby只呈现带有内容的组件，而不显示NAV和页脚(例如，就在Aboutus)。

我的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>组件中创建如下反应结构：

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页中。

这篇关于盖茨比不渲染组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！