本文讲解如何使用原生 JavaScript 模拟 React Router 的动态、嵌套路由行为，避免传统 window.location.replace() 导致的 404 错误，通过哈希路由（Hash Routing）实现单页应用式的路径切换与内容响应。
本文讲解如何使用原生 javascript 模拟 react router 的动态、嵌套路由行为，避免传统 `window.location.replace()` 导致的 404 错误，通过哈希路由（hash routing）实现单页应用式的路径切换与内容响应。
在你的原始代码中，调用 window.location.replace('/123') 实际触发的是服务端路由请求——浏览器会向服务器发起对 /index.html/123 的 GET 请求，而静态服务器（如本地 file:// 或简易 HTTP 服务）通常不支持该路径，因此返回 “Cannot GET /index.html/123” 错误。
✅ 正确思路：采用 前端哈希路由（Hash-based Routing） ——利用 URL 中 # 后的内容（即 hash）作为路由标识，不触发页面重载，完全由 JavaScript 控制视图渲染。
✅ 推荐解决方案：基于 location.hash 的动态路由
修改你的 main.js 如下：
// 路由映射表：定义路径对应的内容或组件逻辑
const routes = {
'/123': () => renderContent('这是动态页面 123'),
'/about': () => renderContent('关于页面'),
'/user/456': () => renderContent('用户 ID: 456'),
'/': () => renderContent('首页')
};
// 渲染函数（可替换为 DOM 操作、模板字符串或真实组件）
function renderContent(content) {
document.body.innerHTML = `
<h1>${content}</h1>
<a href="#" onclick="goTo('/')">← 返回首页</a>
`;
}
// 导航函数：更新 hash 并触发路由
function goTo(path) {
window.location.hash = path;
}
// 初始化：监听 hash 变化
window.addEventListener('hashchange', handleRoute);
window.addEventListener('load', handleRoute); // 页面首次加载时也执行
function handleRoute() {
const path = window.location.hash.slice(1) || '/';
const routeHandler = routes[path] || routes['/'];
routeHandler();
}
// HTML 中按钮改用 goto123 → goTo('/123')
// 注意：无需再拼接完整 URL，直接操作 hash 即可同时更新 HTML 中的按钮：
立即学习“Java免费学习笔记（深入）”；
<button onclick="goTo('/123')">Go to 123</button>
<button onclick="goTo('/about')">Go to About</button>
<button onclick="goTo('/user/456')">Go to User 456</button>⚠️ 关键注意事项
- window.location.hash 是唯一安全、无刷新、兼容性极佳的原生前端路由机制（支持 IE8+）；
- 不要使用 replace() 或 assign() 拼接绝对路径（如 /123），那会强制服务端响应；
- 哈希路由 URL 示例：http://localhost:3000/#/123 → 浏览器不会向服务器请求 /123，仅触发 hashchange 事件；
- 若需支持 history.pushState（无 # 的干净 URL），则必须配合服务端配置（如 Nginx 的 try_files 或 Express 的 fallback 路由），否则仍会 404；纯前端静态环境推荐坚持哈希路由；
- 动态嵌套路由（如 /user/:id）可通过正则或 path-to-regexp 库解析 location.hash 字符串，实现参数提取。
✅ 总结
你遇到的问题本质是混淆了客户端路由与服务端路由。纯 JS 实现动态嵌套路由，核心在于：
- 使用 location.hash 管理路径状态；
- 监听 hashchange 事件驱动视图更新；
- 配合路由表与渲染逻辑，模拟 SPA 行为。
这套方案轻量、零依赖、全浏览器兼容，是构建简单单页应用的理想起点。
