Question

我正在构建一个简单的盖茨比博客，现在不知何故我什么也看不到。当我启动服务器时，我得到的只是一个空白页面，一段时间后它变得无响应。就像陷入无限循环。在控制台中，我看到此 404页面找不到错误。

为什么我在每个页面上都出现404错误？是首页localhost:8000或其他任何页面，例如localhost:8000/blog/react。

这是我的gatsby-config.js：

module.exports = {
  siteMetadata: {
    title: "Full-stack bootcamp",
    author: "Rick Sanchez",
  },
  plugins: [
    "gatsby-plugin-sass",
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "src",
        path: `${__dirname}/src/`,
      },
    },
    "gatsby-plugin-sharp",
    {
      resolve: "gatsby-transformer-remark",
      options: {
        plugins: [
          "gatsby-remark-relative-images",
          {
            resolve: "gatsby-remark-images",
            options: {
              maxWidth: 750,
              linkImagesToOriginals: false,
            },
          },
        ],
      },
    },
  ],
}

/pages/index.js

import React from "react"
import Layout from "../components/layout"

const IndexPage = () => {
  return (
    <Layout>
      <h1>Hello.</h1>
      <p>I'm Rick, a full-stack developer living in Seattle, Washington.</p>
      <p>
        Need a developer? <a href="www.google.com"> Contact Me</a>
      </p>
    </Layout>
  )
}

export default IndexPage

/components/layout.js

import React from "react"
import Header from "./header"
import Footer from "./footer"
import "../styles/index.scss"
import layoutStyles from "./layout.module.scss"

const Layout = props => {
  return (
    <div className={layoutStyles.container}>
      <div className={layoutStyles.content}>
        <Header />
        <div className={layoutStyles.text}>{props.children}</div>
      </div>
      <Footer />
    </div>
  )
}

export default Layout

/components/header.js

import React from "react"
import { Link, graphql, useStaticQuery } from "gatsby"
import headerStyles from "./header.module.scss"
import linkStyles from "./layout.module.scss"

const Header = () => {
  const data = useStaticQuery(graphql`
    query {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)

  return (
    <div>
      <h1>{data.site.siteMetadata.title}</h1>
      <ul className={linkStyles.list}>
        <li>
          <Link
            className={headerStyles.link}
            activeClassName={headerStyles.activeLink}
            to="/"
          >
            Home
          </Link>
        </li>
        <li>
          <Link
            className={headerStyles.link}
            activeClassName={headerStyles.activeLink}
            to="/about"
          >
            About
          </Link>
        </li>
        <li>
          <Link
            className={headerStyles.link}
            activeClassName={headerStyles.activeLink}
            to="/blog"
          >
            Blog
          </Link>
        </li>
        <li>
          <Link
            className={headerStyles.link}
            activeClassName={headerStyles.activeLink}
            to="/contact"
          >
            Contact
          </Link>
        </li>
      </ul>
    </div>
  )
}

export default Header

/components/footer.js

import React from "react"
import { graphql, useStaticQuery } from "gatsby"
// import footerStyles from "./footer.module.scss"

const Footer = () => {
  const data = useStaticQuery(graphql`
    query {
      site {
        siteMetadata {
          author
        }
      }
    }
  `)

  return (
    <Footer>
      Created by &copy; {data.site.siteMetadata.author}
    </Footer>
  )
}

export default Footer

Answer 1

根据Gatsby's documentation about 404 page。

Gatsby确保您的404页面以404.html的静态数量构建托管平台默认将其用作404错误页面。如果您以其他方式托管网站需要设置自定义规则以为该文件提供404错误。

在使用gatsby开发进行开发时，Gatsby使用默认的404页面会覆盖您的自定义404页面。但是，您仍然可以预览点击“预览自定义404页面”以验证您的404页面它按预期工作。这在您进行开发时非常有用您可以看到所有可用页面。

因此，即使在开发模式下，盖茨比也需要运行404。只需在404.js路径下添加/pages，如下所示：

import React from 'react';
import Layout from '../components/layout';

const NotFoundPage = () => (
  <Layout>
    <h1>NOT FOUND</h1>
    <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
  </Layout>
);

export default NotFoundPage;

页面无响应，并且在控制台中出现404错误

1 个答案: