Gatsby博客启动后空白页无响应，全页面404错误求助

Let's break down what's going wrong with your Gatsby setup and fix it step by step:

The Root Cause: Infinite Loop in Footer Component #

Your biggest issue is in /components/footer.js—you're accidentally creating an infinite recursive render loop. The component is named Footer, and in its return statement, you're using <Footer> as the wrapper tag. This means the component calls itself, which calls itself again, and so on until the browser crashes. This loop prevents Gatsby from building your pages properly, which is why every route throws a 404 and the page goes unresponsive.

Here's the problematic code snippet:

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

Fix the Footer Component #

Replace the self-referential <Footer> tag with a standard HTML element like <footer> or <div>:

import React from "react" 
import { graphql, useStaticQuery } from "gatsby" 
// Uncomment this if you want to use your footer styles later
// 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

Minor Tweaks to Avoid Future Issues #

• In /pages/index.js, your contact link is missing the https:// prefix. Right now it will try to navigate to localhost:8000/www.google.com instead of the actual external site. Fix it like this:

  <a href="https://www.google.com"> Contact Me</a>
  

• If you decide to use the footerStyles module later, don't forget to add the class to your footer element: <footer className={footerStyles.footer}>

Verify the Fix #

1. Stop your running Gatsby dev server with Ctrl + C
2. Restart it with gatsby develop
3. Visit localhost:8000—your homepage should load properly now. Note that routes like /about or /blog will still show a 404 until you create corresponding files in the /pages directory (that's expected Gatsby behavior).

内容的提问来源于stack exchange，提问作者metalHead