XAMPP中React刷新404的根本原因是Apache未将非根路径请求兜底至index.html，需正确配置.htaccess（含RewriteBase）、homepage/basename及AllowOverride All。
React 项目在 XAMPP 中刷新任意非根路径就 404，不是代码问题，是 Apache 没把请求兜底到 index.html —— 必须配 .htaccess + 正确 RewriteBase。
为什么 XAMPP 下 React 刷新就 404
React 是单页应用（SPA），所有路由都由前端 JavaScript 控制。比如访问 /dashboard，浏览器不会真去服务器找 dashboard.html，而是靠 createBrowserRouter 或 BrowserRouter 在已加载的 index.html 里动态渲染。但你一刷新，Apache 就会老实按 URL 路径去找物理文件或目录——找不到，直接返回 404。此时 React 根本没机会启动，NotFound 组件也压根不执行。
这和开发时用 npm start 完全不同：react-scripts 内置的开发服务器默认做了 fallback；XAMPP 的 Apache 不会自动做这事。
必须改 homepage 和 basename 才能适配子路径
如果你把 build 后的文件放在 htdocs/react/ 下，而不是根目录 htdocs/，那所有资源路径（JS/CSS）默认还是从 /static/ 加载，结果全是 404。必须显式声明部署路径：
-
package.json里加"homepage": "/react"（不是./react，也不是完整 URL） -
npm run build后检查build/index.html，确认<script>和<link>的src/href都带/react/static/ - 如果用了
BrowserRouter，初始化时必须传basename="/react"；若用createBrowserRouter，则要在createBrowserRouter({ basename: "/react" })里指定
.htaccess 文件必须放对位置且内容精准
.htaccess 必须放在你 React 构建产物的**最外层目录**下（即和 index.html 同级），不是 XAMPP 根目录，也不是 htdocs 根目录。
内容不能照抄通用模板，要匹配你的实际路径：
- 如果部署在
htdocs/react/→RewriteBase /react/（末尾斜杠不能少） - 如果部署在
htdocs/→RewriteBase / - 确保 Apache 已启用
mod_rewrite（XAMPP 默认开启，但若手动改过httpd.conf可能被关掉） - 关键三行条件缺一不可：
RewriteCond %{REQUEST_FILENAME} !-f、!-d、!-l，否则静态资源（如/react/static/js/main.js）也会被重写，导致白屏
完整示例（部署在 /react/）：
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /react/
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /react/index.html [L]
</IfModule>PHP 后端接口要隔离路径并配 CORS
React 前端和 PHP 后端不能混在同一个目录下，否则路由重写会干扰 API 请求。推荐结构：
- 前端：放在
htdocs/react/（含.htaccess） - PHP 接口：统一放在
htdocs/api/（例如htdocs/api/login.php） - 前端调用时用相对路径
/api/login，这样请求不会被.htaccess拦截，直接走真实 PHP 文件 - PHP 脚本开头加上
header('Access-Control-Allow-Origin: http://localhost');等 CORS 头，否则跨域报错
最容易被忽略的是：XAMPP 的 Apache 默认不允许 .htaccess 覆盖配置。你要检查 httpd.conf 里对应目录的 <Directory "C:/xampp/htdocs"> 区块，确保有 AllowOverride All，否则 .htaccess 完全不生效。
