关于hashHistory和browserHistory使用的区别

hashHistory和browserHistory

react-router是为react专门构建的一个路由插件，他可以帮助我们实现简单的单页应用效果，学习react的人，避免不了学习react-router的用法。

hashHistory ： 不需要服务器配置，在URL生成一个哈希来跟踪状态，通常在测试环境使用，也可以作为发布环境使用。

import { Provider } from 'react-redux'import { Router, hashHistory} from 'react-router'ReactDOM.render((    <Provider store={store}>        <Router history={hashHistory}>            <Route>                //你的route            </Route>        </Router>    </Provider>),    document.getElementById('root'));

browserHistory ： 需要服务器端做配置，路径是真实的URL，是官方推荐首选。

客户端配置

import { Provider } from 'react-redux'import { Router, browserHistory } from 'react-router'ReactDOM.render((    <Provider store={store}>        <Router history={browserHistory}>            <Route>                //你的route            </Route>        </Router>    </Provider>),    document.getElementById('root'));

服务端配置

const express = require('express')const path = require('path')const port = process.env.PORT || 8080const app = express()// 通常用于加载静态资源app.use(express.static(__dirname + '/public'))// 在你应用 JavaScript 文件中包含了一个 script 标签// 的 index.html 中处理任何一个 routeapp.get('*', function (request, response){  response.sendFile(path.resolve(__dirname, 'public', 'index.html'))})app.listen(port)console.log("server started on port " + port)

---

• 解释一下为什么browserHistory需要服务端配置，因为真实URL其实是指向服务器资源，比如我们经常使用的API接口，也是一个真实URL的资源路径，当通过真实URL访问网站的时候，第一次访问的是网站的域名，这个时候可以正常加载我们的网站js等文件，而用户手动刷新网页时，由于路径是指向服务器的真实路径，服务器端没有做路由配置，就会导致资源不存在，用户访问的资源不存在，返回给用户的是404错误。

• 通过hashHistory来生成的URL就不会出现这样的问题，因为他不是指向真实的路由。