Hostinger子域名部署React项目路由跳转404问题求助

核心原因 #

React Router采用前端路由机制，如果用原生<a>标签跳转，浏览器会直接向服务器发送新请求，但服务器上不存在/about、/projects这类物理路径，因此返回404。同时即便修复跳转方式，直接在地址栏输入这些路径仍会触发404，需配置服务器重写规则兜底。

解决方案步骤 #

1. 替换原生<a>标签为React Router的<Link>组件 #

修改Navbar组件，用React Router提供的Link处理前端跳转，避免浏览器发起全页请求：

//Navbar component
import "./Navbar.css";
import Logo from "../../assets/images/MegaSiteLogo.png";
// 导入Link组件
import { Link } from "react-router-dom";

const menus = ["Home", "About", "Projects", "Contact us"];

const Navbar = () => {
  return (
    <div className="navbar navbar-expand-md text-black shadow-sm mb-3">
      <div className="container">
        {/* 替换原生a标签为Link */}
        <Link to="/" className="navbar-brand">
          <img src={Logo} alt="logo" width={"120px"} />
        </Link>
        <button
          className="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#mainmenu"
        >
          <span className="navbar-toggler-icon"></span>
        </button>
        <div className="collapse navbar-collapse" id="mainmenu">
          <ul className="navbar-nav ms-auto">
            {menus.map((menu) => (
              <li className="nav-item" key={menu}>
                {/* 替换a标签为Link，to属性对应路由路径 */}
                <Link
                  key={menu}
                  to={
                    menu === "Home"
                      ? "/"
                      : menu === "Contact us"
                      ? "#contact"
                      : menu === "About"
                      ? "/about"
                      : menu === "Projects"
                      ? "/projects"
                      : menu
                  }
                  className="nav-link"
                >
                  {menu}
                </Link>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  );
};

export default Navbar;

2. 配置Hostinger服务器重写规则 #

直接输入路由路径仍会404，需在部署目录创建/修改.htaccess文件，添加规则让所有非物理文件/目录的请求指向React入口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>

若部署在子域名（如sub.yourdomain.com），需将RewriteBase /改为RewriteBase /sub/（替换为你的子域名实际路径）。

3. 重新部署项目 #

执行npm run build重新打包项目，将build文件夹内的所有文件上传至Hostinger对应部署目录，覆盖原有文件。

验证 #

• 点击导航栏的About、Projects链接，可正常跳转无404
• 直接在地址栏输入你的子域名/about，能正常加载对应页面

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