React.js应用在Hostinger服务器刷新子页面出现404错误求助

核心原因 #

React是单页应用（SPA），前端路由由React Router在浏览器端处理。刷新子页面时，浏览器会直接向服务器发起对应路径的HTTP请求，但服务器上并没有该路径的静态资源，因此返回404。

解决方案 #

1. 配置服务器重定向（推荐，保持BrowserRouter美观） #

根据你使用的服务器类型，添加重定向规则，将所有请求指向index.html，让React Router重新处理路由：

Nginx

修改Nginx配置文件（通常是/etc/nginx/nginx.conf或站点专属配置文件）：

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

修改后重启Nginx：sudo systemctl restart nginx

Apache

在项目根目录创建或修改.htaccess文件：

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

确保Apache已启用mod_rewrite模块。

Netlify

在项目根目录创建_redirects文件，内容：

/*    /index.html   200

Vercel

在项目根目录创建vercel.json文件：

{
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

2. 使用HashRouter替代BrowserRouter #

如果不想配置服务器，可以改用HashRouter，它会在URL中添加#，所有路由请求都会指向根路径的index.html：

import { HashRouter as Router, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

缺点是URL会带有#，比如https://yourdomain.com/#/about。

3. 配置React Router的basename（项目部署在子路径时） #

如果你的项目部署在服务器的子路径下（比如https://yourdomain.com/app/），需要在BrowserRouter中设置basename：

<Router basename="/app">
  {/* 路由配置 */}
</Router>

同时确保服务器的重定向规则适配这个子路径。

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