脚本宝典收集整理的这篇文章主要介绍了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
以上是脚本宝典为你收集整理的react-router hashhistory 与 browserhistory有什么区别全部内容，希望文章能够帮你解决react-router hashhistory 与 browserhistory有什么区别所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。