![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React-Router
文章平均质量分 82
wangyuegyq
这个作者很懒,什么都没留下…
展开
-
hash路由模式
这也是为什么当hash的改变(hash的改变会记录在window.hisotry中),不仅仅可以出触发hashchange事件,还会触发popstate事件(监听history对象变化的事件)hash值的变化,会触发hashchange事件,这样我们就可以通过监听hashchanges事件来根据不同的hash值去渲染不同的UI,以实现路由切换的目的。hash的改变,不会访问服务器,不会刷新页面(hash 值是网页的标志位,HTTP 请求不包含锚部分,不会发送给服务器,对后端无影响)原创 2023-11-16 17:04:36 · 214 阅读 · 0 评论 -
HTML5-原生History
而对于通过 history.pushState() 或 history.replaceState() 改变的历史记录,点击浏览器的后退键或前进键页面是没有反应的,那该如何控制页面渲染呢?使用的时候,可以为popstate事件指定回调函数,回调函数的参数是一个 event 事件对象,它的 state 属性指向当前的 state 对象;跳转到相应的历史记录,以当前历史记录为标准线0,回到之前历史记录,为负值,比如回到上一页,n就是-1,向后,就是正值,如果n === 0,相当于刷新当前页面。原创 2023-11-16 16:50:55 · 1486 阅读 · 1 评论 -
History库源码分析-Action 动作类型
Action介绍Action表示location变化(路由切换)的动作类型,目前有三种动作类型:在history栈中,跳转到其他已存在的历史纪录(回退或者前进),这种location变化,叫做POP,比如浏览器的前进或者后退。POP动作类型也作为默认的动作类型,当进行push或者replace时,再更新当前的动作类型为PUSH或者REPLACE。PUSH表示一种新的历史记录被添加到history栈中,例如:react-router中的Link(底层调用的是history.push)。关于 When th原创 2023-11-16 14:35:50 · 187 阅读 · 0 评论 -
React-Router源码分析-History库
createBrowserHistory/createHashHistory:用于浏览器环境,createBrowserHistory对应于history路由模式,而createHashHistory应用于hash模式路由,两者方法的底层都是利用了HTML5 history API方法实现(即监听popstate事件及replaceState、pushState无刷新更改location URL)注意:一个history中,有且仅有一个活跃的listen监听函数,否则会抛出一个异常。原创 2023-11-16 14:08:24 · 181 阅读 · 0 评论 -
_React$Component.call.apply(_React$Component, [this].concat(args))理解
在React-Router打包后的react-router-dom.js文件中,看到过_React$Component.call.apply(_React$Component, [this].concat(args)) || this;今天就聊聊Function.prototype.call.apply(),代码中源码是:var BrowserRouter =/*#__PURE__*/function (_React$Component) { _inheritsLoose(BrowserRou原创 2020-07-19 11:42:05 · 331 阅读 · 0 评论