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

使用 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也要做相应的配置。

如果只是想去掉 ?_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