React项目部署服务器后刷新任意路径出现404问题求助

核心原因 #

React是单页应用（SPA），前端路由完全由客户端JS控制。本地开发时，webpack-dev-server会自动把所有路由请求转发到index.html；但部署到服务器后，服务器会默认去寻找对应路径的静态文件，找不到就返回404。

具体解决思路 #

1. Nginx服务器配置

修改Nginx站点配置文件，添加try_files指令，让所有请求都 fallback 到index.html：

server {
  listen 80;
  server_name 你的域名;
  root /你的项目build文件夹路径;
  index index.html;

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

修改后重启Nginx生效：sudo nginx -s reload

2. Apache服务器配置

在项目的build目录下创建.htaccess文件，写入以下重写规则：

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

确保Apache已启用mod_rewrite模块。

3. 静态托管平台（Netlify/Vercel等）

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

  /* /index.html 200
  

• Vercel：在项目根目录创建vercel.json，配置重写规则：

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

4. 备选方案：改用Hash路由

如果无法修改服务器配置，可以切换为HashRouter，路由路径会带上#（比如你的域名/#/about），服务器只会解析#之前的路径，不会返回404：

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>
  );
}

内容的提问来源于stack exchange，提问作者Mina Ezat Labeb