React项目构建部署后路由刷新出现404问题求助

问题原因 #

React是单页应用（SPA），使用前端路由（如BrowserRouter）时，页面跳转由前端JS处理，不会向服务器发起新请求。但刷新页面时，浏览器会直接请求当前URL对应的资源，而服务器上不存在该路径的静态文件，因此返回404错误。

解决方案 #

1. Nginx服务器配置

修改Nginx配置文件，添加try_files指令，将所有请求导向index.html：

server {
  listen 80;
  server_name 你的域名;
  root /你的React项目build目录路径;
  index index.html index.htm;

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

配置完成后重启Nginx，所有不存在的资源请求都会被转发到index.html，由React前端路由处理路径。

2. Apache服务器配置

在项目build目录下创建.htaccess文件，写入以下内容：

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

该配置会将非文件、非目录的请求重定向到index.html，让前端路由接管路径解析。

3. Node.js Express服务器配置

使用connect-history-api-fallback中间件处理路由回退：

• 先安装依赖：

npm install connect-history-api-fallback --save

• 然后修改Express代码：

const express = require('express');
const history = require('connect-history-api-fallback');
const app = express();

// 启用路由回退中间件
app.use(history());
// 托管静态资源
app.use(express.static(__dirname + '/build'));

app.listen(3000, () => {
  console.log('服务器运行在3000端口');
});

4. 替代方案：使用Hash路由

若不想修改服务器配置，可改用HashRouter，URL会带上#（如xxx.com/#/about），刷新时浏览器仅请求根路径的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>
  );
}

注：Hash路由URL不够简洁，优先推荐服务器配置方案。

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