react-router hashhistory 與 browserhistory有什麼區別

import React from 'react'
import { render } from 'react-dom'
import { Router, Route, hashHistory } from 'react-router'
import App from './modules/App'
import About from './modules/About'
import Repos from './modules/Repos'

render((
  <Router history={hashHistory}>
    <Route path="/" component={App}/>
    <Route path="/repos" component={Repos}/>
    <Route path="/about" component={About}/>
  </Router>
), document.getElementById('app'))

使用 hashHistory，瀏覽器上看到的 url 會是這樣的: /#/repos?_k=adseis

使用 browserHistory，瀏覽器上看到的 url 會是這樣的：/repos

看起來固然 browserHistory 很好很理想，但 browserHistory 須要 server 端支持。 而使用hashHistory的時候，由於 url 中 # 符號的存在，從 /#/ 到 /#/repos 瀏覽器並不會去發送一次 request，react-router 本身根據 url 去 render 相應的模塊。

而使用 browserHistory 的時候，瀏覽器從 / 到 /repos 是會向 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 還在，/#/repos