React跳转为什么页面不重载

  在使用 React 开发项目时你可能注意到，当点击页面中的跳转链接时，地址栏的 URL 发生了变化，但页面却没有被重载，只是改了部分内容。这在传统网页中几乎是不可能的事，我们一旦换了 URL 地址，浏览器就会向服务器发起请求并重新加载页面。那为什么在 React 里，页面地址变了却不刷新？

Hash 路由

样式：使用 # 后面的内容作为路径，如：http://localhost:3000/#/about。

特点：

• 不会被浏览器自动发送到服务器；
• 改变 hash 不会触发页面刷新；
• 可以通过 hashchange 事件监听变化。

这使得我们可以在不刷新页面的前提下，根据 hash 的值来决定页面要显示什么内容。

History 路由

样式：符合正常的用户使用习惯，如：http://localhost:3000/about。

但注意，直接使用 <a href="/about"> 是会导致页面刷新并请求服务器的，这和传统网站跳转没区别。

那为什么在 React 中，即便 URL 变化为 /about，也不刷新页面呢？

history.pushState

这是 HTML5 新增的 History API ，允许我们在不刷新的前提下改变地址栏的内容：

history.pushState(null, '', '/about')

这行代码会：

• 更改浏览器地址栏；
• 不刷新页面；
• 不请求服务器；
• 不触发 load 事件；
• 可被监听（通过 popstate 事件）。

通过这个 API，我们就能控制 URL 而不依赖 <a> 的默认跳转行为。

Link 组件

React Router 提供了 <Link> 组件，就是为了实现“自定义跳转逻辑 + 阻止默认行为”。

它内部其实做了这几件事：

1. 阻止 <a> 的默认跳转（用 e.preventDefault()）；
2. 调用 history.pushState 改变 URL；
3. 通知 React Router 当前路径的改变，渲染对应的组件。

所以如果直接写 <a href="/about">，浏览器会执行默认行为，发起请求，刷新页面。
而 <Link> 把这行为“拦截”了下来，变成前端自己控制的跳转。

技术	特点	是否刷新页面
Hash 路由	改变 # 部分，浏览器不会刷新	❌
History 路由 + pushState	改变 URL，不触发默认跳转	❌
<a> 标签	浏览器默认行为，会请求服务器	✅
<Link> 组件	阻止默认行为，手动跳转	❌

小结

前端路由的本质，是让前端自己“伪装”成浏览器跳转，但实际上是局部更新组件。无论是 hash 还是 history，都是为了让用户感觉像在换页面，但实际上整个应用一直没有真正“刷新”。 React Router 就是通过 pushState + 路由监听，帮使用者把这个过程自动化了。而 <Link> 只是这个机制中的一个小小入口。