在XAMPP中部署React应用访问返回404错误问题咨询

解决方案 #

• 开启Apache重写模块
  打开XAMPP控制面板，点击Apache对应的「Config」按钮，选择Apache (httpd.conf)，搜索LoadModule rewrite_module modules/mod_rewrite.so，如果行首有#注释符，删除#后保存配置，重启Apache服务。
• 修改目录权限允许读取.htaccess
  仍在httpd.conf文件中，找到<Directory "你的XAMPP安装路径/htdocs">配置块，将块内的AllowOverride None修改为AllowOverride All，保存后重启Apache。
• 调整.htaccess适配子目录部署
  确保.htaccess文件放在htdocs/react目录下，和构建生成的index.html同级，将内容修改为：

  Options -MultiViews
  RewriteEngine On
  RewriteBase /react/
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule ^ index.html [QSA,L]
  

• 确认访问路径与路由配置
  部署完成后访问地址为http://localhost/react，可先用无痕模式访问避免缓存干扰。如果使用的是React Router v6版本，需要调整路由写法适配v6规范：

  <React.StrictMode>
    <BrowserRouter basename='/react'>
      <Routes>
        <Route exact path="/" element={<Home />} />
        {/* 其余路由统一放在Routes组件内 */}
      </Routes>
    </BrowserRouter>
  </React.StrictMode>
  

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