关于hashHistory和browserHistory使用的区别

关于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((



//你的route


),
document.getElementById('root')
);
browserHistory ： 需要服务器端做配置，路径是真实的URL，是官方推荐首选。
客户端配置
import { Provider } from 'react-redux'
import { Router, browserHistory } from 'react-router'
ReactDOM.render((



//你的route


),
document.getElementById('root')
);
服务端配置
const express = require('express')
const path = require('path')
const port = process.env.PORT || 8080
const app = express()
// 通常用于加载静态资源
app.use(express.static(__dirname + '/public'))
// 在你应用 JavaScript 文件中包含了一个 script 标签
// 的 index.html 中处理任何一个 route
app.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就不会出现这样的问题，因为他不是指向真实的路由。

如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！

点此我要举报以上问答信息