React项目部署Hostinger后路由页面404问题求助

问题分析 #

本地开发时React Router的客户端路由能正常工作，但部署到Hostinger后直接访问/blogpage/:id/:title这类子路由出现404，核心原因是：

• React是单页应用（SPA），所有路由逻辑在客户端处理
• Hostinger的Apache服务器收到子路由请求时，会尝试寻找对应物理文件，找不到就返回404，不会自动指向index.html

解决步骤 #

1. 修正homepage配置位置 #

你当前把homepage写在了package-lock.json里，这是错误的——package-lock.json是自动生成的依赖锁文件，应该把配置放到package.json中：

{
  "name": "blogapp",
  "homepage": "https://codenlearn.online",
  "version": "0.1.0",
  "private": true,
  // 其他原有配置...
}

配置完成后重新执行npm run build生成正确的构建文件。

2. 添加Apache重写规则（.htaccess） #

在Hostinger的文件管理器中，找到应用根目录（通常是public_html），创建或编辑.htaccess文件，添加以下内容：

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.html [QSA,L]

这个规则会让服务器把所有非物理文件/目录的请求都转发到index.html，交给React Router处理客户端路由。

3. 确认嵌套路由的Outlet配置 #

你的BlogPage是嵌套在Home路由下的子路由，需要确保Home组件内部包含<Outlet />（来自react-router-dom），否则子路由内容无法渲染：

import { Outlet } from 'react-router-dom';

function Home() {
  return (
    <div>
      {/* Home组件原有内容 */}
      <Outlet /> {/* 子路由的内容会渲染到这里 */}
    </div>
  );
}

4. 验证后端API请求（辅助检查） #

虽然当前是404问题，但也要确保BlogPage中的API请求路径正确，避免部署后出现额外错误：

// 建议用环境变量配置API地址，避免硬编码
axios.get(`${process.env.REACT_APP_API_URL}/getblogs`, { params: { _id: id } })

额外检查 #

• 确认构建后的所有文件（包括index.html和静态资源）完整上传到Hostinger对应目录
• 测试前清除浏览器缓存，避免旧缓存影响结果

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