一:对比这两个方式:

    无论是react,dva,还是antd pro,前端路由使用的是react router,所有可以选择两种方式:browserHistory和hashHistory。

两者的区别简单来说是对路由方式的处理不一样,hashHistory 是以 # 后面的路径进行处理,通过 HTML 5 History 进行前端路

由管理,而 browserHistory 则是类似我们通常的页面访问路径,并没有 #,通过服务端的配置,能够访问指定的 url 都定向到

当前页面,从而能够进行前端的路由管理。

所以如果你的 url 里有 #,想去掉的话,需要切换为 browserHistory。

如果你使用的是静态站点,那么使用 browserHistory 可能会无法访问你的应用,因为假设你访问 

http://localhost:8000/dashboard/monitor,那么其实你的静态服务器并没有能够映射的文件,而使用 hashHistory 则不会有

这个问题,因为它的页面路径是以 # 开始的,所有访问都在前端完成,如:http://localhost:8000/#/dashboard/monitor。

不过如果你有对应的后台服务器,那么我们推荐采用 browserHistory,只需要在服务端做一个映射。

二:聊聊history

histoty 是 RR4 的两大重要依赖之一(另一个当然是 React 了),在不同的 javascript 环境中, history 以多种能够行驶实现了对会话(session)历史的管理。

我们会经常使用以下术语:
"browser history" - history 在 DOM 上的实现,用于支持 HTML5 history API 的浏览器
"hash history" - history 在 DOM 上的实现,用于旧版浏览器。
"memory history" - history 在内存上的实现,用于测试或非 DOM 环境(例如 React Native)。


history 对象通常具有以下属性和方法:

length: number 浏览历史堆栈中的条目数
action: string 路由跳转到当前页面执行的动作,分为 PUSH, REPLACE, POP
location: object 当前访问地址信息组成的对象,具有如下属性:
pathname: string URL路径
search: string URL中的查询字符串
hash: string URL的 hash 片段
state: string 例如执行 push(path, state) 操作时,location 的 state 将被提供到堆栈信息里,state 只有在 browser 和 memory history 有效。
push(path, [state]) 在历史堆栈信息里加入一个新条目。
replace(path, [state]) 在历史堆栈信息里替换掉当前的条目
go(n) 将 history 堆栈中的指针向前移动 n。
goBack() 等同于 go(-1)
goForward 等同于 go(1)
block(prompt) 阻止跳转
history 对象是可变的,因为建议从 <Route> 的 prop 里来获取 location,而不是从 history.location 直接获取。
--------------------- 
作者:qq_29854831 
来源:CSDN 
原文:https://blog.csdn.net/qq_29854831/article/details/79636095 

02-13 16:25