React项目部署AWS EC2后无法直接访问路由页面的问题求助

核心原因 #

React单页应用（SPA）的路由是前端层面实现的，当直接访问/login这类路径或用window.location.href跳转时，浏览器会向Nginx发起真实HTTP请求，Nginx默认会去服务器目录查找对应物理文件（比如/login.html），但这类文件根本不存在，所以返回404。而useNavigate是前端路由跳转，不会触发新的HTTP请求，只是在浏览器端修改路由并渲染对应组件，因此能正常工作。

修复步骤 #

1. 修改Nginx配置，让所有前端路由请求指向React入口文件 #

编辑你的Nginx配置文件（通常在/etc/nginx/nginx.conf或/etc/nginx/sites-available/下的站点配置），在处理静态文件的location块中添加try_files指令：

server {
    listen 80;
    server_name 你的EC2主机地址;

    # 指向React构建后的静态文件目录
    root /path/to/your/react/build/folder;
    index index.html;

    # 处理前端路由，将所有不存在的文件请求转发到index.html
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 代理ASP.NET后端API请求（假设后端接口前缀为/api）
    location /api {
        proxy_pass http://localhost:5000; # 替换为你的ASP.NET后端运行端口
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

2. 确认React路由使用BrowserRouter #

检查你的React项目路由配置，确保使用BrowserRouter而非HashRouter（HashRouter会在路径前加#，虽能避免404但URL不友好），示例配置：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import Signup from './pages/Signup';
import Login from './pages/Login';

function App() {
    return (
        <Router>
            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/signup" element={<Signup />} />
                <Route path="/login" element={<Login />} />
            </Routes>
        </Router>
    );
}

3. 重启Nginx使配置生效 #

执行以下命令验证配置语法并重启Nginx：

sudo nginx -t # 检查配置是否有语法错误
sudo systemctl restart nginx

4. 移除多余的http-server（可选） #

既然已经用Nginx托管静态文件，http-server属于冗余服务，停止并移除它可减少资源占用，避免端口冲突。

验证 #

完成配置后，直接访问http://你的EC2主机地址/login或通过window.location.href = '/login'跳转，应该能正常加载对应页面，同时API请求也能正确代理到ASP.NET后端。

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