在使用React开发应用，尤其是搭配React Router 进行前端路由时，很多开发者都会遇到这样一个问题：当刷新页面或者直接访问非根路径（例如/about或/users/123）时，页面会显示404错误。这种问题在React应用部署到生产环境时尤为常见。

为什么会遇到这个问题呢？

这是因为React应用是一个单页应用（SPA），所有路由都是在客户端由JavaScript进行处理的。当浏览器访问非根路径时，服务器会尝试查找对应的物理文件，但这些文件并不存在，于是就返回了404错误。

如何解决这个问题。

解决方案一：使用HashRouter

最简单的解决办法就是将BrowserRouter改为HashRouter。HashRouter会在URL中添加#符号，虽然看起来不那么优雅，但能有效解决问题。

对于有服务器配置权限的同学，我们推荐配置服务器将所有请求重定向到index.html。这样React Router就能接管路由处理了。

Apache服务器配置示例：

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

Nginx服务器配置示例：

server {  listen 80;  location / {    root /path/to/your/react/app;    index index.html;    try_files $uri $uri/ /index.html;  }}

解决方案三：使用serve工具部署

如果你使用serve工具来部署React应用，可以启用SPA模式：

npx serve -s build

总结

总结一下，解决React应用部署时的404错误问题，可以采用以下方法：

最简单的解决方案：使用HashRouter最佳实践：配置服务器将所有请求重定向到index.html根据实际部署环境选择合适的方案希望这些解决方案能帮助你顺利部署React应用，避免404错误问题。如果还有其他疑问或问题，欢迎在评论区留言交流！