React项目部署Hostinger后直接访问子页面出现404错误求助

你的问题本质是前端路由与服务器路由的冲突：React的BrowserRouter是客户端路由，本地开发服务器会自动把所有路由请求转发到index.html，但Hostinger的Apache服务器默认会去查找对应路径的物理文件，找不到就返回404。

正确的.htaccess配置 #

替换你当前的.htaccess内容为以下代码，确保服务器把所有非静态文件的请求都指向index.html：

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

操作步骤 #

1. 将上述.htaccess文件放到React项目的public目录下
2. 重新执行打包命令：npm run build
3. 把打包生成的build（或dist）文件夹内的所有文件，上传到Hostinger的public_html根目录

额外检查项 #

• 确认Hostinger服务器已开启mod_rewrite模块（Hostinger默认开启，若未开启可联系客服或在主机面板中启用）
• 确保index.html位于public_html根目录，静态资源（css、js、img等）路径正确
• 若上传后仍有问题，清空浏览器缓存再测试

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