哈希路由是兼容老环境的权宜之计，现代项目应优先使用 createBrowserRouter；其URL中#源于浏览器片段标识符机制，不触发请求但影响SEO与API使用；迁移需替换路由创建方式并配置服务端fallback。
哈希（
）本身不是问题，而是
前端
路由在不支持 History API 的老环境或特定部署场景下的权宜之计；现代项目应优先用
（React Router v6.4+）或
，仅当必须兼容 IE11、静态托管无服务端重写时，才保留哈希路由。
哈希路由为什么会在 URL 里多出
这是浏览器原生行为：所有以
开头的片段标识符（fragment identifier）不会触发页面刷新，也不发请求给服务端。前端路由库（如早期
、
的
）正是靠监听
事件来驱动视图切换。
服务端完全看不到
及其后内容，所以部署到 Nginx/Apache 时无需配置重写规则
但分享链接
看起来不专业，SEO 友好性差，且无法使用
等新 API
部分分析工具（如 Google Analytics）默认忽略哈希变化，需手动打点
怎么把哈希路由换成 History 路由（React Router v6.4+）
核心是替换路由创建方式，并确保服务端能 fallback 到
。不改代码只换部署配置，必然 404。
把
换成
移除所有
中硬编码的
或类似逻辑
Nginx 配置加一条
，Apache 加
重写规则
若部署在 GitHub Pages 或 Netlify，需分别启用
fallback 或设置
文件
示例迁移：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
必须用哈希时，怎么避免常见坑
不是所有场景都能立刻切 History —— 比如内网系统要求兼容 IE11，或嵌入三方平台被限制修改服务端配置。这时得管好哈希本身。
不要手动拼接
，改用路由库的导航方法（如
），否则丢失状态和 scroll behavior
哈希参数含特殊字符（空格、中文、
）必须
，否则
解析错乱
在 React Router 中返回的是带
的完整字符串，提取路径要用
或正则
服务端日志或埋点中若记录
，注意它不含哈希，可能掩盖真实来源
哈希本身很简单，难的是判断「此刻是否真需要它」—— 很多团队保留哈希只是因为没验证过服务端 fallback 是否生效，或者误以为 CDN 不支持重写。上线前用 curl 测试 404 路径，比写十行哈希处理逻辑更重要。
#createBrowserRouterhistory.pushState##React Router v3Vue Routermode: 'hash'hashchange#https://site.com/#/user/123scrollRestorationindex.htmlcreateHashRoutercreateBrowserRouterbasename/#try_files $uri $uri/ /index.html;.htaccess404.html_redirects// 迁移前（哈希）
const router = createHashRouter(routes);
// 迁移后（History）
const router = createBrowserRouter(routes, {
basename: "/app", // 可选，对应子路径部署
});window.location.hash = "#/user?id=1"navigate("/user", { state: { id: 1 } })&encodeURIComponentlocation.hashuseLocation().hash#location.hash.slice(1)document.referrer