[react-router] hashHistory 和 browserHistory 的区别

最新推荐文章于 2025-06-10 11:00:18 发布

转载最新推荐文章于 2025-06-10 11:00:18 发布 · 147 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhangpan1244/p/6228333.html

文章标签：

#javascript #运维 #ViewUI

本文详细介绍了React Router的不同实现方式，包括hashHistory和browserHistory的区别与应用场景。阐述了为何browserHistory更受推荐，以及在不同场景下如何选择合适的路由方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react-router提供了三种方式来实现路由，并没有默认的路由，需要在声明路由的时候，显式指定所使用的路由。

//v1.x
<Router/>
//v2.0.0
// hash history
import { hashHistory } from 'react-router' <Router history={hashHistory} />

browserHistory
hashHistory
createMemoryHistory

官方推荐使用browserHistory

使用hashHistory,浏览器的url是这样的：/#/user/liuna?_k=adseis

使用browserHistory,浏览器的url是这样的：/user/liuna

这样看起来当然是browerHistory更好一些，但是它需要server端支持。

使用hashHistory时，因为有 # 的存在，浏览器不会发送request,react-router 自己根据 url 去 render 相应的模块。

使用browserHistory时，从 / 到 /user/liuna, 浏览器会向server发送request，所以server要做特殊请求，比如用的 express 的话，你需要 handle 所有的路由 app.get('*', (req, res) => { ... })，使用了 nginx 的话，nginx也要做相应的配置。

如果只是静态页面，就不需要用browserHistory,直接hashHistory就好了。

react router为什么推荐使用browserHistory而不推荐hashHistory？

首先 browserHistory 其实使用的是 HTML5 的 History API，浏览器提供相应的接口来修改浏览器的历史记录；而 hashHistory 是通过改变地址后面的 hash 来改变浏览器的历史记录；

History API 提供了 pushState() 和 replaceState() 方法来增加或替换历史记录。而 hash 没有相应的方法，所以并没有替换历史记录的功能。但 react-router 通过 polyfill 实现了此功能，具体实现没有看，好像是使用 sessionStorage。

另一个原因是 hash 部分并不会被浏览器发送到服务端，也就是说不管是请求 http://domain.com/index.html#foo 还是 http://domain.com/index.html#bar ，服务只知道请求了 index.html 并不知道 hash 部分的细节。而 History API 需要服务端支持，这样服务端能获取请求细节。

还有一个原因是因为有些应该会忽略 URL 中的 hash 部分，记得之前将 URL 使用微信分享时会丢失 hash 部分。

转载于:https://www.cnblogs.com/zhangpan1244/p/6228333.html