React项目Hostinger部署后新标签打开导航栏链接报404求助

React单页应用（SPA）的路由由前端JS处理，直接在新标签页打开子路径时，Hostinger的Apache服务器会尝试查找对应物理文件，找不到就返回404。本地开发服务器和Vercel默认配置了请求回退，所以不会出现这个问题，只需在Hostinger添加路由重写规则即可解决：

解决方案步骤 #

• 在React项目的public目录下创建.htaccess文件，写入以下规则：

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

这段代码的作用是：开启URL重写，将所有非物理文件、非目录的请求转发到index.html，交由React前端路由处理。

• 执行npm run build构建项目，将构建产物（包括.htaccess）上传到Hostinger网站的根目录（通常是public_html文件夹），确保.htaccess和index.html处于同一层级。

• 若已有.htaccess文件，无需覆盖，将上述规则添加到现有文件中即可，注意避免规则冲突。

额外检查 #

• 确认Hostinger主机使用的是Apache服务器（大部分共享主机默认是），若为Nginx需配置对应规则，但Hostinger共享主机一般无需考虑。
• 检查Hostinger控制面板的“URL重写”或“伪静态”功能是否已开启，确保重写规则生效。

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