react history

GitHub上history库的翻译：

安装
npm install --save history
类型
import { createBrowserHistory, createHashHistory, createMemoryHistory } from ‘history’
存在三类history，分别时browser，hash，与 memory。history包提供每种history的创建方法。
如果使用React Router，他会为你自动创建history对象，所以并不需要与history进行直接的交互。
方法与属性
location：属性反映了当前应用所在的"位置"。
其包含了pathname，search，hash这种由’URL’派生出的属性。
每一个location都拥有一个与之关联且独一无二的key。
'key’用于特定location的识别，向特定location存储数据。
location可以拥有与之相关的状态。这是一些固定的数据，并且不存在于URL之中。
实例：
{
pathname: ‘/here’,
search: ‘?key=value’,
hash: ‘#extra-information’,
state: { modal: true },
key: ‘abc123’
}
当创建一个history对象后，需要初始化location。对于不同类型history这一过程也不相同。
说明：
我们只能访问当前location，history对象持续追踪着一组location。
history也保存一个索引值，用来指向当前所对应的location。

navigation：方法 navigation允许你改变当前location。

push：方法允许跳转到新的location。
a-b-c 可以回到上一级
默认情况下，当你点击时，会调用history.push方法进行导航。
当使用history.push()跳转到新的location时，被跳转location被清除。

replace：方法用法类似push,但被跳转location不会被清除。
a-b-c 回不到上一级适用于登录后，不需要重新回到登页面

goBack：方法返回上一层页面
实例：
history.goBack()

goForward：方法去往下一层页面
实例：
history.goForward()

go：方法向前或向后跳转到指定页面
实例：
history.go(3)
动态监听
采用观察者模式，在location改变时，history会发出通知。
每一个history对象都有listen方法，接受一个函数作为参数。
React Router的router组件将会订阅history对象，这样当location变化时，其能重新渲染。
实例：
history.listen(function (location) { … })
事物连接
每一类history都拥有createHref方法，其使用location对象，输出URL。
实例：
const location = {
pathname: ‘/one-fish’,
search: ‘?two=fish’,
hash: ‘#red-fish-blue-fish’
}
const url = history.createHref(location)
const link = document.createElement(‘a’)
a.href = url
//
browser history与hash history
browser history与hash history都被用于浏览器环境。
创建history对象的方法：
const browserHistory = createBrowserHistory()
const hashHistory = createHashHistory()

区别：
最大区别在于从URL创建location的方式。
browser history使用完整URL，而hash history只使用在#后的那部分URL。
memory 缓存所有history
使用memory location可以在能使用JavaScript的地方随意使用。
允许在不依赖浏览器运行的情况下测试代码
使用memory history会失去与地址栏的交互能力

react history相关推荐

React history.push 传递参数
从一个组件跳转到另外的组件,通过代码控制跳转如下: history.push("/index/goodsinfo/goodsdetail"); ///index/goodsinfo ...
react history路由跳转
场景: 我从一个子集页面直接退出登录 , 然后重新登录 ,会直接到我刚刚退出的子页面. 问题: 这个子页面有返回上一个的按钮 ,此时点击这个按钮直接就跳转到登录页了!!! 场景图: ...
React学习资料+css进阶资料总结
# Awesome ## 最佳实践 * [React + Redux 最佳实践](https://github.com/sorrycc/blog/issues/1) * [Redux 最佳实践-译]( ...
使用Typescript编写Redux+Reactjs应用程序
为什么80%的码农都做不了架构师?>>> 注:本文的原始资料和示例来自ServiceStackApps/typescript-redux ,根据我的实际情况,做了一些调整,详见 ...
在React Hook里使用history.push跳转
在React Hook里使用history.push跳转 react hook里用不了this.props.history的解决方法首先引入 import { useHistory } from ' ...
vue react 路由history模式刷新404问题解决方案
vue react 路由history模式刷新404问题解决方案参考文章: (1)vue react 路由history模式刷新404问题解决方案 (2)https://www.cnblogs.co ...
react使用link跳转传递参数_React-Typescript之路由跳转（使用this.props.history.push)
接上篇: 问题: 如果使用 this.props.history.push('/searchs') ,它是有问题的,导致不能跳转,因为没有props,需要使用withRouter为这个对象添加hist ...
React 项目使用 React-router-dom 4.0 以上版本时使用 HashRouter 怎么控制 history
不添加 history 时,来回点击 Link 会在控制台报错如下 Warning: Hash history cannot PUSH the same path; a new entry will ...
2021-05-29 react antd 函数式组件使用history.push(url)时，跳转不刷新的问题？
**在传递URL使使用给传递了一个state成功解决问题形如history.push(url,{a:1}) **

react history

react history相关推荐

最新文章

热门文章