browserHistory和hashHistory

时间:2024-11-18 08:11:57
首先  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就不会出现这样的问题,因为他不是指向真实的路由。