如何用JavaScript实现路由机制_前端路由有哪些实现方式

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 组件才能激活。漏掉这一步会导致路由完全不工作，控制台无报错，页面空白或始终显示根组件。

AI发型设计

虚拟发型试穿工具和发型模拟器

下载

• 正确写法：

  import { createBrowserRouter, RouterProvider } from 'react-router-dom';
  const router = createBrowserRouter([
    { path: '/', element: <Home /> },
    { path: '/about', element: <About /> }
  ]);
  ReactDOM.createRoot(document.getElementById('root')).render(
    <RouterProvider router={router} />
  );

• 旧版 BrowserRouter + Routes 方式仍可用，但不支持 loader / action 等新能力
• createBrowserRouter 内部基于 createMemoryRouter 和原生 History API，因此默认启用 HTML5 History 模式
• 部署到非根路径（如 /app/）时，需在 createBrowserRouter 中传入 basename: '/app'

手写简易路由时，event.preventDefault() 容易被忽略

如果用 <a></a>），点击会触发真实页面请求。必须阻止默认行为，再调用 <a href="https://www.php.cn/link/80b7b0e690b99b5246e4b11990fb8184">用户</a> 或修改 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) 替代）
• 移动端点击延迟、重复触发等问题，建议加防抖或禁用点击态