将React应用部署至GitHub Pages出现404页面问题求助

Hey there! Let's figure out why your MemoryGame is showing a blank 404 after deploying to GitHub Pages. I’ve got a few targeted fixes to try, starting with the most obvious issue in your config:

1. Remove the Leading Space in Your homepage Field #

Looking at your package.json, the homepage value has an accidental leading space:

"homepage": " https://silvodesigns.github.io/MemoryGame/",

This tiny space throws off GitHub Pages’ ability to resolve your app’s static assets. Fix it by deleting the space:

"homepage": "https://silvodesigns.github.io/MemoryGame/",

After updating this, re-run your deploy command:

npm run deploy

2. Verify the gh-pages Branch Content #

Sometimes the deploy process doesn’t push the correct build files. Head over to your GitHub repo, switch to the gh-pages branch, and make sure it contains all the files from your local build folder (like index.html, the static directory, etc.). If the content looks wrong or incomplete:

• Delete the existing gh-pages branch locally:

  git branch -D gh-pages
  

• Re-run the deploy command to rebuild and push fresh files:

  npm run deploy
  

3. Fix Routing Issues (If Using React Router) #

If your app uses React Router’s BrowserRouter, GitHub Pages won’t handle those clean URLs correctly—it’s a static host, so it doesn’t know how to route paths like /game to your index.html. Switch to HashRouter instead:

// Replace this:
import { BrowserRouter } from "react-router-dom";

// With this:
import { HashRouter } from "react-router-dom";

// Then update your component wrapper:
<HashRouter>
  {/* Your app routes here */}
</HashRouter>

Rebuild and deploy after making this change.

4. Double-Check GitHub Pages Settings #

Go to your repo’s Settings > Pages and confirm:

• The deployment source is set to the gh-pages branch, and the root directory (not /docs or another subfolder)
• The site status shows "Your site is live at..." with the correct URL

Start with the first fix—that leading space is almost certainly causing the majority of your issues. If that doesn’t work, work through the other steps one by one.

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