使用GoDaddy主机+React Router v6.21.1构建项目后页面空白求助

核心问题分析 #

直接打开build文件夹的index.html或用Live Server打开页面空白，主要涉及静态资源路径配置、路由模式兼容性、服务器重写规则有效性三个关键点。

具体解决方案 #

1. 配置项目基础路径（解决资源加载失败） #

如果项目部署在GoDaddy主机的子目录下（如yourdomain.com/navigate/），需在package.json中添加homepage字段，指定资源加载的基础路径：

{
  "name": "navigate",
  "version": "0.1.0",
  "private": true,
  "homepage": "./", // 子目录部署则写为"/navigate/"
  // 保留原有其他配置内容
}

添加后重新执行npm run build，再将build文件夹内的所有文件上传到主机。

2. 切换HashRouter用于本地预览 #

BrowserRouter依赖服务器端路由重写逻辑，本地直接打开index.html或用Live Server时，路由无法正确映射导致空白。临时切换为HashRouter可解决本地预览问题：
修改App.js：

import logo from "./logo.svg";
import { HashRouter, Routes, Route } from "react-router-dom";
import "./App.css";
import About from "./About";
import Service from "./Service";
import Home from "./Home";

function App() {
  return (
    <HashRouter>
      <Routes>
        <Route index path="/" element={<Home />} />
        <Route path='/about' element={<About />} />
        <Route path='/service/' element={<Service />} />
      </Routes>
    </HashRouter>
  );
}

export default App;

重新build后，本地打开index.html即可正常显示；部署到GoDaddy时，再切回BrowserRouter即可。

3. 修复.htaccess重写规则 #

你的.htaccess中[QSA, L]的空格会导致Apache忽略该规则，修正后的内容如下：

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [QSA,L]
</IfModule>

将该文件放到GoDaddy主机的项目根目录（与build后的index.html同目录），GoDaddy默认已开启mod_rewrite模块，无需额外配置。

4. 确认主机部署路径 #

确保将build文件夹内的所有文件（而非build文件夹本身）上传到GoDaddy的网站根目录（通常为public_html文件夹）；若为子目录部署，则上传到对应子目录下。

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