history.pushState 不触发页面跳转，因其仅修改 URL 和历史记录；需手动监听 popstate 事件并更新视图，且首次加载须主动读取 location.pathname 渲染。
history.pushState 为什么没触发页面跳转
调用 history.pushState() 不会自动加载新页面，这是它的设计特性——它只修改 URL 和历史记录，不触发导航。如果你期望“像点击链接一样切换视图”，必须手动监听 popstate 事件，并在回调里更新 DOM 或渲染组件。
- 常见错误：只调用
pushState()就以为路由已生效，结果页面内容没变 - 必须配合
window.addEventListener('popstate', handler)才能响应浏览器前进/后退 -
pushState()的第三个参数（URL）需为同源路径，否则抛出SecurityError - 首次进入页面时不会触发
popstate，需在初始化时手动读取location.pathname并渲染对应视图
hashchange 路由兼容性好但 URL 不美观
hashchange 是最老也最兼容的前端路由方式，依赖 URL 中 # 后面的部分（即 hash），IE8+ 均支持。但它生成的 URL 像 example.com/#https://www.php.cn/link/80b7b0e690b99b5246e4b11990fb8184/123，对 SEO 和用户感知都不友好。
- 监听方式简单：
window.addEventListener('hashchange', () => { ... }) - 修改 hash 不刷新页面：
location.hash = '/post/456' - 注意：
hashchange事件中无法直接获取完整 URL 变化，需用location.hash手动读取 - 服务端无需配置，所有 hash 路径都指向同一 HTML 入口文件
React Router v6 的 createBrowserRouter 必须搭配 RouterProvider
React Router v6.4+ 推出的全新数据路由模式，createBrowserRouter 创建的 router 对象不能直接使用，必须传给 RouterProvider 组件才能激活。漏掉这一步会导致路由完全不工作，控制台无报错，页面空白或始终显示根组件。
- 正确写法：
import { createBrowserRouter, RouterProvider } from 'react-router-dom'; const router = createBrowserRouter([ { path: '/', element:}, { path: '/about', element: } ]); ReactDOM.createRoot(document.getElementById('root')).render( ); - 旧版
BrowserRouter+Routes方式仍可用，但不支持 loader / action 等新能力 -
createBrowserRouter内部基于createMemoryRouter和原生HistoryAPI，因此默认启用 HTML5 History 模式 - 部署到非根路径（如
/app/）时，需在createBrowserRouter中传入basename: '/app'
手写简易路由时，event.preventDefault() 容易被忽略
如果用 ），点击会触发真实页面请求。必须阻止默认行为，再调用 用户 或修改 pushState。
立即学习“Java免费学习笔记（深入）”；
- 遗漏
hash是导致页面意外刷新的最常见原因 - 推荐统一用事件委托绑定：
preventDefault() - 注意区分：服务端渲染链接（需保留 href 供爬虫和无 JS 场景使用）与纯前端路由链接（href 应设为
document.addEventListener('click', e => { if (e.target.matches('a[data-router]')) { e.preventDefault(); navigate(e.target.href); } })或用javascript:void(0)替代） - 移动端点击延迟、重复触发等问题，建议加防抖或禁用点击态
button 和 preventDefault 初始化这两处最容易漏掉，一漏就全盘失效。 
