ReactJS部署后页面刷新出现404问题求助

这个问题的核心原因是：React是单页应用（SPA），开发环境下create-react-app的内置服务器会自动把所有路由请求转发到index.html，但部署到生产环境的静态服务器（比如Apache、Nginx）时，刷新页面浏览器会直接向服务器请求对应路径的物理文件，而你的项目只有index.html这一个入口文件，服务器找不到对应路径的资源就会返回404。

必须配置服务器让所有路由请求都指向index.html，或者改用HashRouter，下面分情况给出解决方法：

1. Apache服务器配置 #

在你的项目部署目录下创建.htaccess文件，添加以下内容：

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.html [QSA,L]

这段配置的作用是：如果请求的不是实际存在的文件或目录，就把请求转发到index.html，交给React路由处理。

2. Nginx服务器配置 #

修改Nginx的站点配置文件（通常在/etc/nginx/sites-available/目录下），在location /块中添加try_files规则：

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

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

配置完成后重启Nginx服务生效。

3. 使用Express.js托管 #

如果用Express作为后端服务器来托管React静态文件，需要添加路由 fallback，确保所有请求都指向index.html：

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

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

// 所有非静态资源请求都返回index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

// 启动服务器
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

4. 无需服务器配置的替代方案：HashRouter #

如果不想配置服务器，可以把BrowserRouter替换成HashRouter，这样路由会以#开头（比如/#/Hakkimizda），服务器只会解析#前面的路径，后面的部分由React路由处理：

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

<Router>
  <Navbar/>
  <Routes>
    <Route path='/' exact element={<Anasayfa />} />
    <Route path='/Hakkimizda' exact element={<Hakkimizda />} />
    <Route path='/Markalar' exact element={<Markalar />} />
    <Route path='/Sektorler' exact element={<Sektorler />} />
    <Route path='/Urunler' exact element={<Urunler />} />
    <Route path='/Iletisim' exact element={<Iletisim />} />
  </Routes>
  <Footer/>
</Router>

注意：HashRouter会让URL带有#，不够美观，且对SEO有一定影响，优先推荐服务器配置方案。

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