【react-router】hashhistory 与 browserhistory有什么区别

#1

请问,hashhistory 与 browserhistory有什么区别 ?

1 Like
#2

使用 hashHistory，浏览器上看到的 url 会是这样的: /#/user/haishanh?_k=adseis

使用 browserHistory，浏览器上看到的 url 会是这样的：/user/haishanh

看起来当然 browserHistory 很好很理想，但 browserHistory 需要 server 端支持。 而使用hashHistory的时候，因为 url 中 # 符号的存在，从 /#/ 到 /#/user/haishanh 浏览器并不会去发送一次 request，react-router 自己根据 url 去 render 相应的模块。

而使用 browserHistory 的时候，浏览器从 / 到 /user/haishanh 是会向 server 发送 request 的。所以 server 端是要做特殊配置的。比如用的 express 的话，你需要 handle 所有的路由 app.get('*', (req, res) => { ... })，使用了 nginx 的话，nginx也要做相应的配置。 具体见这里，还有这个例子。

所以你的 App 是静态，没有服务端的话，只能用 hashHistory。

7 Likes
#3

谢谢 很详细！那看来我需要服务端进行配置了.

#4

如果只是想去掉 ?_k=adseis 这样的字符串的话，可以使用外部的 history 模块。

import { createHashHistory } from 'history';

const appHistory = useRouterHistory(createHashHistory)({ queryKey: false });

ReactDOM.render(
  <Router history={appHistory}>
    {routes}
  </Router>,
  document.getElementById('app')
);

这样子，url 会稍微干净点，但 hash 还在，/#/user/haishanh

1 Like
#5

原来这么去掉啊 谢谢 。大神 请收下我的膝盖 都是我想要知道的答案 :kissing_heart:

#6

如果把后面?_k=adseis这个去掉的话 会有影响么

#7

_k= 后面的字符串是用于切换不同页面的时候从 windwo.sessionStorage 获取一些状态信息的。

没搞过。

我的理解是，你不需要保存 session 信息的话，应该是不需要的。

See also

#8

我通过
npm install --save history安装了模块 ，
通过import { createHistory } from 'history’加载后报错：

请问这是为什么呢？

#9

你这个好像不是 history 的问题吧。

不过据我所知，当前版本的react-router和 history@3.0 不兼容，所以你要安装 2.x 版本的history 比如

npm install --save history@2.1.2
#10

好的我试试

#11

现在地址栏后面的那个确实没了 。
但是路由中带参数的state的属性不可使用了？

那我应该怎么传参呢？

#12

没明白 你这个是什么情况 贴下代码？

你是想要router component之外的导航吗

#13 
 <Link to={{ 
           pathname: 'business/BaiduSearch/update',
           state:  { id: record.id } 
            }} > 修改 </Link>

就是这样 我需要点击修改然后跳转到对应页面business/BaiduSearch/update，
并且传递id参数。就报上面的那个错了。

#14

不使用 queryKey 的话，这个地方的 state 就是不支持的啊，上面报错说的很清楚

看来你还得考虑用 browserHistory

#15

:cry:

#16

谢谢，

#17

给跪了

#18

谢谢！感谢分享！