Hostinger部署React网站后刷新/直接访问特定页面出现404错误

问题原因 #

React单页应用（SPA）的路由逻辑完全在浏览器端处理，属于前端路由。当直接访问http://www.mywebsitedomain.com/about这类子页面URL，或是刷新页面时，服务器会尝试在主机上寻找对应名称的物理文件或目录，但这些路由对应的内容实际由React渲染，服务器找不到匹配的资源就返回404。

解决方案（Hostinger默认Apache服务器） #

在网站根目录创建或修改.htaccess文件，添加以下规则：

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

这条规则会将所有非物理文件/目录的请求转发到index.html，交由React前端路由处理。

操作步骤 #

1. 登录Hostinger文件管理器或通过FTP连接主机
2. 进入网站根目录（通常为public_html文件夹）
3. 若已有.htaccess文件则直接编辑，无则新建同名文件
4. 粘贴上述代码并保存
5. 刷新浏览器测试问题是否解决

补充说明 #

• 确保React项目已执行npm run build，并将build文件夹内所有文件完整上传至Hostinger网站根目录
• 若主机使用Nginx服务器（Hostinger较少见），需修改Nginx配置文件添加如下规则：

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

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