React JS项目刷新路由页面（如/about）出现404错误的解决咨询

问题原因 #

React单页应用（SPA）使用客户端路由，正常页面跳转是通过JS在浏览器端处理URL变化，不会向服务器发起新请求。但刷新页面时，浏览器会直接向服务器请求/about这类路径，而服务器上不存在对应的物理文件，因此返回404错误。

解决方案 #

1. 配置服务器，将所有路由请求指向index.html #

这是最通用的解决方案，让服务器无论收到什么路径的请求，都返回SPA的入口文件index.html，再由React客户端路由处理具体路径逻辑。

Nginx配置

修改Nginx站点配置文件，添加try_files指令：

server {
  listen 80;
  server_name your-domain.com;
  root /path/to/your/react/app/build;
  index index.html;

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

修改完成后重启Nginx生效。

Apache配置

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

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

确保Apache已启用mod_rewrite模块。

Express服务器配置

如果使用Express作为后端服务器，添加路由处理中间件：

const express = require('express');
const path = require('path');
const app = express();

// 托管静态资源
app.use(express.static(path.join(__dirname, 'build')));

// 所有请求返回index.html
app.get('/*', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(3000);

2. 使用HashRouter替代BrowserRouter #

如果不想修改服务器配置，可以改用React Router提供的HashRouter。它会在URL中添加#分隔符（例如https://localhost:3000/#/about），刷新时服务器仅会请求根路径，#后的内容由浏览器端处理，不会触发404。

修改路由核心代码：

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

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

注意：这种方式会改变URL结构，可能对SEO有一定影响，适合开发阶段或对URL美观要求不高的场景。

3. 托管平台专属配置（Netlify/Vercel等） #

如果部署在Netlify，在项目根目录创建_redirects文件，内容如下：

/*    /index.html   200

如果使用Vercel，创建vercel.json文件：

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

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