React Router Dom本地正常，部署到GitHub Pages后/home路由404求助

开发者阿泽

2026-8-3

解决GitHub Pages部署React路由404问题

你遇到的是静态主机处理前端路由的典型问题：GitHub Pages默认只会响应真实存在的文件请求，当直接访问/home时，服务器会尝试寻找对应的文件或目录，找不到就返回404——但React的路由是客户端路由，所有路径都应该指向index.html，由前端来处理跳转。

下面是两种可行的解决办法：

方法一：改用HashRouter（最简单）

把BrowserRouter换成HashRouter，它会用URL的哈希部分（#后面的内容）来管理路由，GitHub Pages不会解析哈希部分，只会返回index.html，前端路由就能正常工作。

修改你的App.js：

import React from "react";
// 替换BrowserRouter为HashRouter
import { HashRouter as Router, Routes, Route } from 'react-router-dom';
import Landing from "./Pages/Landing";
import Home from "./Pages/Home";

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Landing />} />
        <Route path="/home" element={<Home />} />
      </Routes>
    </Router>
  );
}

export default App;

重新build并部署后，访问路径会变成https://yourdomain.com/#/home，不会出现404。

方法二：保留BrowserRouter，添加404重定向配置

如果你不想用哈希路由，需要让GitHub Pages在找不到路径时返回index.html，步骤如下：

在项目的public目录下创建404.html，内容完全复制public/index.html的内容。
确保package.json里的homepage设置为你的自定义域名：
```
"homepage": "https://yourcustomdomain.com/"
```
检查GoDaddy的DNS配置：添加CNAME记录，指向nameremovedforprivacy.github.io，同时GitHub Pages的设置里已经绑定了你的自定义域名。