React应用部署Apache子目录下动态参数路由访问异常问题咨询

修正.htaccess配置 #

替换/myapp/.htaccess内容为：

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

配置解释 #

• RewriteEngine On：开启Apache URL重写模块
• RewriteBase /myapp/：设定重写基准路径为子目录，确保所有路由请求都基于该目录处理
• RewriteRule ^index\.html$ - [L]：直接放行对index.html本身的请求，终止后续规则
• RewriteCond %{REQUEST_FILENAME} !-f：匹配非真实存在的文件请求
• RewriteCond %{REQUEST_FILENAME} !-d：匹配非真实存在的目录请求
• RewriteRule . /myapp/index.html [L]：将所有符合上述条件的请求转发到React应用的入口文件，交由React路由处理

额外检查 #

1. 确保Apache已启用mod_rewrite模块，以Ubuntu为例，执行以下命令开启并重启服务：

   sudo a2enmod rewrite
   sudo systemctl restart apache2
   

2. package.json的homepage可简化为"/myapp"，适配不同环境：

   "homepage": "/myapp"
   

3. React的BrowserRouter的basename="/myapp"配置保持不变，动态路由<Route path="user/:userId" element={<UserProfile />} />无需修改

修改后，所有子路径请求（如/myapp/user/7）都会被正确转发到React应用入口，由前端路由完成匹配，解决404问题。

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