React项目npm run build后HashRouter仍异常，页面出现404错误

你遇到的核心问题是HashRouter的路由访问逻辑没走对，结合你的代码和部署场景，按以下步骤排查：

1. 确认正确的访问路径 #

HashRouter的路由需要带#前缀，所有非主页的访问路径必须是：

• 管理员登录页：http://localhost/#/manager/login
• 接待员登录页：http://localhost/#/receptionist/login
  如果直接输入不带#的路径（比如http://localhost/manager/login），XAMPP会认为你要访问服务器上的物理文件，自然返回404。

2. 替换原生标签为Link组件 #

如果页面里用了原生<a href="/manager/login">跳转，会触发浏览器刷新并向服务器发送请求，必须改用react-router-dom提供的Link组件：

import { Link } from 'react-router-dom';

// 替换原有的a标签
<Link to="/manager/login">管理员登录</Link>

Link组件会在前端处理路由跳转，自动添加#前缀，不会触发服务器请求。

3. 清理冗余的exact属性 #

react-router-dom v6中，Route默认就是精确匹配，你App.js里的path="/" exact可以去掉，改为：

<Route path="/" element={<Receptionist />} />

4. 检查部署路径 #

确保build文件夹的所有内容完整复制到XAMPP的htdocs目录下（比如htdocs/your-app），访问时路径应为http://localhost/your-app/#/manager/login，如果放在子目录下，不要漏掉子目录前缀。

额外检查 #

如果之前为BrowserRouter配置过.htaccess文件，现在改用HashRouter后，建议删除或注释掉文件里的重写规则，避免干扰前端路由逻辑。

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