使用cPanel部署多页面React应用时Router失效问题求助

我之前刚帮朋友处理过一模一样的问题，这本质是Apache服务器（cPanel默认使用的Web服务器）不认识React Router的前端路由规则导致的——本地开发时，React的开发服务器会自动处理这些路由，但cPanel上的Apache会把/Library这类路径当成要访问的物理文件，找不到就返回404。

下面是我亲测有效的解决步骤：

1. 配置.htaccess重写规则（最推荐的方法） #

Apache通过.htaccess文件来配置目录级的服务器规则，我们需要添加重写规则，让所有非文件/目录的请求都转发到index.html，交给React Router处理：

1. 在你的React项目的public文件夹下创建一个.htaccess文件（注意文件名开头有个点），写入以下内容：

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

2. 如果你是把应用部署在cPanel的子目录（比如public_html/my-react-app），需要修改RewriteBase和最后一行的路径：

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

3. 运行npm run build生成生产环境包，此时.htaccess会被自动包含在build文件夹里。

2. 确保package.json的homepage配置正确 #

这一步很容易忽略，它会影响build后资源文件的路径：

• 如果部署在cPanel根目录（public_html），在package.json里添加：

  "homepage": "/"
  

• 如果部署在子目录，比如my-react-app，则设置：

  "homepage": "/my-react-app/"
  

3. 部署到cPanel的正确姿势 #

1. 把build文件夹里的所有文件（包括.htaccess）上传到cPanel对应的目录（根目录就传去public_html，子目录就传去对应的文件夹）；
2. 上传完成后，直接访问你的域名（或子目录路径），现在刷新/Library这类页面应该就不会404了。

备选方案：改用HashRouter #

如果你不想配置.htaccess，可以把React Router的BrowserRouter换成HashRouter，这样路由会变成/#/Library的形式，Apache会把整个路径当成index.html的锚点，不会返回404。不过这种方法会让URL带个#，体验稍差，所以更推荐前面的.htaccess方案。

排查小技巧 #

• 如果还是不行，检查cPanel的Apache重写模块是否开启：可以在cPanel的"软件"板块找"Apache模块"，确保mod_rewrite是启用状态；
• 确认.htaccess文件没有被cPanel的文件管理器隐藏（可以开启"显示隐藏文件"选项）；
• 检查上传的文件是否完整，特别是index.html和.htaccess有没有漏传。

内容的提问来源于stack exchange，提问作者Ash._