首先
browserHistory
其实使用的是 HTML5 的
History API
,浏览器提供相应的接口来修改浏览器的历史记录;而
hashHistory
是通过改变地址后面的 hash 来改变浏览器的历史记录;
History API 提供了 pushState() 和 replaceState() 方法来增加或替换历史记录。而 hash 没有相应的方法,所以并没有替换历史记录的功能。但 react-router 通过 polyfill 实现了此功能,具体实现没有看,好像是使用 sessionStorage。
另一个原因是 hash 部分并不会被浏览器发送到服务端,也就是说不管是请求
/#foo
还是
/#bar
,服务只知道请求了 并不知道 hash 部分的细节。而 History API 需要服务端支持,这样服务端能获取请求细节。
还有一个原因是因为有些应该会忽略 URL 中的 hash 部分,记得之前将 URL 使用微信分享时会丢失 hash 部分。
react-router和History简介
react-router
react-router是为react专门构建的一个路由插件,他可以帮助我们实现简单的单页应用效果,学习react的人,避免不了学习react-router的用法。
History
history 一个管理js应用session会话历史的js库。它将不同环境(浏览器,node...)的变量统一成了一个简易的API来管理历史堆栈、导航、确认跳转、以及sessions间的持续状态。
History基本 使用
import { createHistory } from 'history'
location
你也可以使用 history对象来的方法来改变当前的location:
一个 history 知道如何去监听浏览器地址栏的变化, 并解析这个 URL 转化为 location 对象, 然后 router 使用它匹配到路由,最后正确地渲染对应的组件。
location对象包括:
pathname 同
search 同
state 一个捆绑在这个地址上的object对象
action PUSH, REPLACE, 或者 POP中的一个
key 唯一ID
常用的三种history
// Hash historyimport createHistory from 'history/lib/createHashHistory'
// 内存 history (如:node环境)import createHistory from 'history/lib/createMemoryHistory'
// HTML5 history, 推荐
import createHistory from 'history/lib/createBrowserHistory'
hashHistory
不需要服务器配置,在URL生成一个哈希来跟踪状态,通常在测试环境使用,也可以作为发布环境使用。
((<Provider store={store}><Router history={hashHistory}><Route>//你的route</Route></Router></Provider>),('root'));
import { Provider } from 'react-redux'
import { Router, hashHistory} from 'react-router'
browserHistory
需要服务器端做配置,路径是真实的URL,是官方推荐首选。
客户端配置
((<Provider store={store}><Router history={browserHistory}><Route>//你的route</Route></Router></Provider>),('root'));
import { Provider } from 'react-redux'
import { Router, browserHistory } from 'react-router'
服务端配置
// 通常用于加载静态资源((__dirname + '/public'))
// 在你应用 JavaScript 文件中包含了一个 script 标签// 的 中处理任何一个 ('*', function (request, response){((__dirname, 'public', ''))})
(port)("server started on port " + port)
const express = require('express')
const path = require('path')
const port = || 8080
const app = express()
为什么browserHistory需要服务端配置
因为真实URL其实是指向服务器资源,比如我们经常使用的API接口,也是一个真实URL的资源路径,当通过真实URL访问网站的时候,第一次访问的是网站的域名,这个时候可以正常加载我们的网站js等文件,而用户手动刷新网页时,由于路径是指向服务器的真实路径,服务器端没有做路由配置,就会导致资源不存在,用户访问的资源不存在,返回给用户的是404错误。
通过hashHistory来生成的URL就不会出现这样的问题,因为他不是指向真实的路由。