React路由在本地开发时候正常，但是编译部署在服务器后，会发现直接访问这个网站的某个路由，或者在某个路由刷新页面后会报错404。

其实这是一个比较典型的问题：Nginx 服务器配置未能正确处理前端的客户端路由。

背景说明(请认真看完)：域名是 dontalk.org，后端路由直接通过编辑这个网站的 Nginx配置文件，把 dontalk.org/api/ 定向到我的后端 127.0.0.1:3456 (后端代码中定义)。访问前端页面，前端直接从 /api/xxx 里面取数据。

在本地开发时，前端直接写明白向后端 “http://localhost:3000/xxx” 取数据的。编译前我改成了 /api/xxx 这个相对地址。因为通过反向代理，已经把这个页面的 /api/ 请求，指向了后端 /。记得，一定是 /api/，因为 /api 会导致 GET 到 /api//xxx。

正文

当我直接访问 / 时，并没有报错，在 / 中点击某个页面，进去那个页面(路由)，也正常。但是，直接通过URL访问某个页面(路由)，却报错 404。这个 404 甚至不是我写的页面，而是很简陋，很像 Nginx 提供的页面(事实上就是)。

这个时候去看 Nginx 错误日志，会发现记录有一条：

...open() ＂/var/wwwroot/dontalk.org/xxx＂ failed (2: No such file or directory), ...

没错，这就是 Nginx 的锅，它没有正确解析我们的路由，所以导致我们在 页面刷新、直接通过URL访问 就报错。甚至给人一种 “是这个路由页面不工作，是代码写错了” 的错觉。

解决

其实解决方案也简单到令人不可置信，你只需要在你的 Nginx (该页面)配置里面增加短短三行内容，整个网站就正常了。无论是刷新还是直接URL访问，都正常了。

location / {
        try_files uriuri/ /index.html;
    }

保存，检查语法，重启Nginx，就那么简单。

为什么会这样？

...open() ＂/var/wwwroot/dontalk.org/xxx＂ failed (2: No such file or directory), ... 表明 Nginx 尝试访问 /xxx 路径对应的物理文件或目录，但未能找到，导致 404 错误。这是因为 React 应用使用客户端路由 (react-router-dom)，而 Nginx 未正确配置为单页应用 (SPA) ，所以无法将 /xxx 等路由请求重定向到 index.html。