React应用部署在cPanel服务器子目录下手动访问及刷新页面出现404错误求助

这是单页应用（SPA）部署到子目录时非常典型的问题，我来帮你一步步解决：

问题根源 #

React用的是前端路由：当你通过页面按钮跳转时，是React在浏览器内部处理路径切换，不会向服务器发送新的请求；但直接输入http://mywebsite.com/help/或者刷新页面时，浏览器会直接向服务器请求这个路径，而cPanel的Apache服务器默认会去寻找对应路径下的物理文件，找不到就返回404。

当你把文件放在根目录public_html时，可能根目录已经有适配SPA的.htaccess配置，所以没问题，但子目录里没有这套规则，就会触发错误。

解决方案 #

1. 先配置React的基础路径 #

首先确保React构建时生成的资源路径都是基于子目录的：

• 打开你的React项目根目录下的package.json，添加一行：

  "homepage": "/help/"
  

• 重新执行构建命令：

  npm run build
  

• 把build文件夹里的所有文件（包括index.html、静态资源文件夹等）上传到cPanel的public_html/help目录下，不要把整个build文件夹传进去。

2. 在子目录添加.htaccess重写规则 #

在public_html/help目录下新建一个名为.htaccess的文件（注意文件名开头的点），写入以下内容：

RewriteEngine On
RewriteBase /help/
RewriteRule ^index\.html$ - [L]
# 如果请求的不是真实存在的文件或目录，重定向到index.html
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /help/index.html [L]

这个规则的作用是：让Apache把所有不存在的文件/目录请求都转发到index.html，这样React就能接管路由，处理你的前端路径了。

额外注意事项 #

• 确保你的cPanel主机已经启用了mod_rewrite模块（绝大多数主机默认都是开启的，如果没开可以联系主机服务商开启）。
• 上传文件后，清空浏览器缓存再测试，避免旧资源干扰。

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