ReactJS项目部署Hostinger后pages文件夹嵌套页面无法加载

核心原因及对应解决方法 #

1. 配置服务器重写规则（最关键） #

React是单页应用，前端路由不会向服务器请求对应物理文件。直接访问嵌套路径时，Hostinger服务器会找不到匹配的文件，返回404。需让服务器把所有请求转发到index.html：

• Apache服务器：在项目根目录（Hostinger的public_html下对应项目文件夹）新建.htaccess文件，写入以下内容：

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

• Nginx服务器：联系Hostinger服务商修改配置，或自行添加规则：

location / {
  try_files $uri $uri/ /index.html;
}

2. 核对路由basename配置 #

如果项目部署在Hostinger的子目录下（比如https://你的域名.com/react-project/），必须在路由组件里指定basename：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Router basename="/react-project">
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/subfolder/your-page" element={<NestedPage />} />
      </Routes>
    </Router>
  );
}

3. 确认构建与上传完整性 #

• 执行npm run build后，把生成的build文件夹内所有文件（包括static子文件夹）完整上传到Hostinger对应目录，不要遗漏任何资源文件。
• 检查路由路径是否和实际访问路径一致，比如子文件夹页面的路由应为/subfolder/page，而非和本地文件路径一致的/pages/subfolder/page。

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