React配合Apache部署后输入路由或刷新报404如何解决？

按以下步骤依次排查配置：

1. 开启Apache rewrite模块 #

执行命令开启重写模块，之后重启Apache服务：

a2enmod rewrite
systemctl restart apache2

2. 允许站点目录读取.htaccess配置 #

编辑你的Apache站点配置文件（通常路径为/etc/apache2/sites-available/000-default.conf），在配置中添加/修改对应目录的权限规则：

<Directory /var/www/html/client>
    Options Indexes FollowSymLinks MultiViews
    AllowOverride All
    Require all granted
</Directory>

修改完成后重启Apache生效。

3. 修正.htaccess配置 #

因为你的应用部署在/client子目录下，原配置的根路径匹配错误，将/var/www/html/client/.htaccess内容替换为如下：

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

4. 修正React打包和路由配置 #

• 在项目package.json中添加配置项："homepage": "/client"
• 在App.js的路由外层BrowserRouter组件添加basename属性：

<BrowserRouter basename="/client">
  {/* 你原有Switch和Route的代码 */}
</BrowserRouter>

重新打包项目后将产物部署到/var/www/html/client目录。

5. 验证配置 #

清理浏览器缓存，重启Apache服务后再次测试直接访问路由、刷新路由场景即可。

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