React应用部署至DigitalOcean生产环境后直接访问路由出现404错误的排查与修复请求

阿华AIGC实验室

2026-4-30

React SPA部署DigitalOcean后直接访问路由404的问题解决

这是React单页应用（SPA）部署后非常常见的问题，我帮你梳理下原因和具体修复方案：

问题根源

React Router属于客户端路由：当你通过应用内链接跳转时，是React在浏览器端直接处理路由切换，不会向服务器发送新的请求；但直接在浏览器输入/products或刷新页面时，请求会直接发到DigitalOcean上的服务器（比如Nginx），而服务器上并没有实际的/products文件或目录，所以返回404错误。

修复方案

针对DigitalOcean的部署场景，推荐两种实用解决方式：

1. 配置服务器（优先推荐，以Nginx为例）

如果你的应用用Nginx托管，只需要修改配置，让所有路由请求都重定向到index.html，交给React Router处理：

登录到你的DigitalOcean服务器
找到Nginx站点配置文件（通常在/etc/nginx/sites-available/目录下）
修改配置，在location /块中添加try_files指令：

server {
  listen 80;
  server_name your-domain.com; # 替换成你的域名
  root /path/to/your/react/app/build; # 替换成build目录的实际路径
  index index.html;

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

保存配置后重启Nginx：sudo systemctl restart nginx

这样服务器会把所有匹配不到实际文件的请求，都转发到index.html，React Router就能正确解析路由了。

2. 改用HashRouter（无需修改服务器）

如果暂时不想调整服务器配置，可以把React Router的<Router>替换为<HashRouter>。这种方式会在URL中添加#（比如url/#/products），浏览器会把它当作锚点处理，不会向服务器发送请求：
修改你的App.js代码：

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

// 其余Route配置保持不变
<Router>
  <NavBar />
  <Switch>
    <Route exact path={`${process.env.PUBLIC_URL}/`} component={Home} />
    <Route path={`${process.env.PUBLIC_URL}/products`} component={Products} />
    <Route path={`${process.env.PUBLIC_URL}/category/:category`} component={Category} />
  </Switch>
</Router>

这种方式操作简单，但URL会带有#，对SEO不太友好，所以更推荐第一种服务器配置方案。