首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么React-router在调用browserHistory.push方法后没有立即重定向?

React-router在调用browserHistory.push方法后没有立即重定向的原因是因为React-router使用了HTML5的history API来管理路由,而不是传统的URL重定向。当调用browserHistory.push方法时,React-router会更新URL,并触发路由的重新渲染,但页面的重定向是由浏览器来处理的,需要等待浏览器完成URL的更新和页面的重新加载。

具体来说,React-router使用了history库来管理路由,其中包括三种history类型:browserHistory、hashHistory和memoryHistory。在使用browserHistory时,React-router会通过history.pushState方法来更新URL,并且不会触发页面的重新加载。这样可以实现单页应用的路由切换效果,提升用户体验。

当调用browserHistory.push方法后,React-router会更新URL,并且重新渲染匹配的组件。但由于浏览器的机制,页面的重定向需要等待浏览器完成URL的更新和页面的重新加载。因此,在调用browserHistory.push方法后,页面不会立即重定向,而是等待浏览器完成相关操作后才会进行重定向。

需要注意的是,React-router提供了一些钩子函数,如componentWillReceiveProps和componentDidUpdate,可以在路由发生变化时进行相关操作,例如获取新的路由参数并更新组件状态。这些钩子函数可以用来处理路由变化后的逻辑,以便在页面重定向后进行相应的处理。

总结起来,React-router在调用browserHistory.push方法后没有立即重定向是因为它使用了HTML5的history API来管理路由,更新URL后需要等待浏览器完成页面的重新加载才会进行重定向。这样可以实现单页应用的路由切换效果,并提升用户体验。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

react-router 环境下使用 antd-mobile tabbar

本文阐述了如何在一个使用了 react-router 的 react 项目中合理的使用 antd-mobile tabbar 功能。... antd-mobile 官方的例子中可以看到,只需要将不同的组件放置到每个 TabBar.Item 里面就可以了,这样就可以实现简单的切换效果,但是存在几个问题。...如果按上面的方法做是无法实现的。 另外一个问题是这样的设计不太符合大型项目的框架设计,我们往往会制作一些 layouts,给不同的组件匹配不同的 layout。...如果按上面介绍的方法做,也是不好实现的。 综合以上两点问题,再加上 Google 了一些资料,写下本文,以帮助更多遇到类似问题的人。...总结 这样处理无论我们直接访问 URL 还是点击 tabbar 下面的任意按钮,不但可以切换页面,路由也会随之变动。最重要的是我们套用了 layout,让项目看起来更加合理。

2.4K20

react-router 环境下使用 antd-mobile tabbar

本文阐述了如何在一个使用了 react-router 的 react 项目中合理的使用 antd-mobile tabbar 功能。... antd-mobile 官方的例子中可以看到,只需要将不同的组件放置到每个 TabBar.Item 里面就可以了,这样就可以实现简单的切换效果,但是存在几个问题。...如果按上面的方法做是无法实现的。 另外一个问题是这样的设计不太符合大型项目的框架设计,我们往往会制作一些 layouts,给不同的组件匹配不同的 layout。...如果按上面介绍的方法做,也是不好实现的。 综合以上两点问题,再加上 Google 了一些资料,写下本文,以帮助更多遇到类似问题的人。...总结 这样处理无论我们直接访问 URL 还是点击 tabbar 下面的任意按钮,不但可以切换页面,路由也会随之变动。最重要的是我们套用了 layout,让项目看起来更加合理。

29610

react-router 的使用与优化

中的一些组件介绍; react-router 与 redux 结合; react-router 与懒加载; HTML5 中的路由跳转 history 对象中有一个 pushState 方法,它接受三个参数...相较于 hashRouter,该方法的路由没有 # 标志。需要注意的是,生成的路径是 虚拟的,当再次回车,页面可能就什么都没了。...history 还有三个方法调用这三个方法相当于点击了前进或者后退按钮,但页面会刷新: back() 表示向后跳转一个页面; forward() 表示向前跳转一个页面; go(number) 当是负值时表示向后移动一个页面...上面代码中,App 组件的 props 也是没有路由信息的,也可以使用 withRouter 方法去包裹。...静态的服务器环境中,无法直接更改应用程序的状态。在这种情况下,可以 context 特性中标记要渲染的结果。如果出现了 context.url,就说明应用程序需要重定向

3.2K10

从零手写react-router

Switch和Redirect的实现withRouter的实现Link和NavLink实现聚合api封装自己的生成match对象方法封装之前, 我想跟大家先分享path-to-regexp这个库为什么要先聊这个库哈..., 主要原因是因为react-router中用到了这个库, 我看了一下其实我们也没必要自己再去实现一个这个库(为什么没必要呢,倒并不是因为react-router没有实现我们就不实现, 而是因为这个库实现的功能非常简单...history的push方法, action变为PUSH如果调用了history的replace方法, action变为REPLACEpush: 向当前地址栈指针位置入栈一个地址go: 控制当前地址栈指针偏移...Switch和Redirect的实现withRouter的实现Link和NavLink实现聚合api封装自己的生成match对象方法封装之前, 我想跟大家先分享path-to-regexp这个库为什么要先聊这个库哈..., 主要原因是因为react-router中用到了这个库, 我看了一下其实我们也没必要自己再去实现一个这个库(为什么没必要呢,倒并不是因为react-router没有实现我们就不实现, 而是因为这个库实现的功能非常简单

3.1K30

字节前端面试题总结

前端面试题视频讲解constructor 为什么不先渲染?由ES6的继承规则得知,不管子类写不写constructor,new实例的过程都会给补上constructor。...,每一个新创建的函数都有定义自身的 this 值(构造函数中是新对象;严格模式下,函数调用中的 this 是未定义的;如果函数被称为“对象方法”,则为基础对象等),但箭头函数不会,它会使用封闭执行上下文的...react的父级组件的render函数重新渲染会引起子组件的render方法的重新渲染。但是,有的时候子组件的接受父组件的数据没有变动。...props这个参数给super,调用super(props),否则只需要写super()React-Router怎么设置重定向?...(构造函数中)调用 super(props) 的目的是什么 super() 被调用之前,子类是不能使用 this 的, ES2015 中,子类必须在 constructor 中调用 super()

1.5K10

从零手写react-router

Switch和Redirect的实现withRouter的实现Link和NavLink实现聚合api封装自己的生成match对象方法封装之前, 我想跟大家先分享path-to-regexp这个库为什么要先聊这个库哈..., 主要原因是因为react-router中用到了这个库, 我看了一下其实我们也没必要自己再去实现一个这个库(为什么没必要呢,倒并不是因为react-router没有实现我们就不实现, 而是因为这个库实现的功能非常简单...history的push方法, action变为PUSH如果调用了history的replace方法, action变为REPLACEpush: 向当前地址栈指针位置入栈一个地址go: 控制当前地址栈指针偏移...如果一旦页面地址发生变化, Router要重新渲染以响应变化, 怎么响应, 就是通过listen方法 // 为什么要将location变成状态, 主要是因为当我们的页面地址产生变化的时候, 我们需要做的事情有几个...目录下新建一个Redirect.js// react-router/Redirect.js// Redirect组件其实就是用来做重定向的, 其实逻辑也可以非常简单, 当你遇到了Redirect组件,

1.4K40

从零手写react-router

Switch和Redirect的实现withRouter的实现Link和NavLink实现聚合api封装自己的生成match对象方法封装之前, 我想跟大家先分享path-to-regexp这个库为什么要先聊这个库哈..., 主要原因是因为react-router中用到了这个库, 我看了一下其实我们也没必要自己再去实现一个这个库(为什么没必要呢,倒并不是因为react-router没有实现我们就不实现, 而是因为这个库实现的功能非常简单...history的push方法, action变为PUSH如果调用了history的replace方法, action变为REPLACEpush: 向当前地址栈指针位置入栈一个地址go: 控制当前地址栈指针偏移...如果一旦页面地址发生变化, Router要重新渲染以响应变化, 怎么响应, 就是通过listen方法 // 为什么要将location变成状态, 主要是因为当我们的页面地址产生变化的时候, 我们需要做的事情有几个...目录下新建一个Redirect.js// react-router/Redirect.js// Redirect组件其实就是用来做重定向的, 其实逻辑也可以非常简单, 当你遇到了Redirect组件,

1.4K50

前端老牌框架衰退,IMVC(同构 MVC)成未来趋势?

同构的种类 同构分为内容同构和形式同构,内容同构指同样的代码客户端和服务端做等价的事情。形式同构通过判断所处环境来执行某段代码,也就是说客户端或者服务端始终有一部分代码没有执行。...重定向最少有三种以上的实现方式: 改变前端location 位置 前端使用pushState 方法,只改变路径并触发函数 ,但是不进行页面渲染 服务端采用302 重定向,通过封装函数判断环境以及重定向方法...React-Router的理念也难以满足要求,查看view-source 会发现它没有实现同构。另外Redux 适用于大型应用,而我们的主要场景是中小型。...方法,返回view 实例 调用view-engine 将 view 的实例根据环境渲染成 html 或 native-ui 等。...如何处理 css 按需加载 问题根源:浏览器只 dom-ready 之前会等待 css 资源加载再渲染页面 问题描述:当单页跳转到另一个 url,css 资源还没加载完,页面显示成混乱布局 处理办法

1.3K20

从零手写react-router_2023-03-01

这个库 为什么要先聊这个库哈, 主要原因是因为react-router中用到了这个库, 我看了一下其实我们也没必要自己再去实现一个这个库(为什么没必要呢,倒并不是因为react-router没有实现我们就不实现...history的push方法, action变为PUSH 如果调用了history的replace方法, action变为REPLACE push: 向当前地址栈指针位置入栈一个地址 go: 控制当前地址栈指针偏移...如果一旦页面地址发生变化, Router要重新渲染以响应变化, 怎么响应, 就是通过listen方法 // 为什么要将location变成状态, 主要是因为当我们的页面地址产生变化的时候, 我们需要做的事情有几个...我这里没有写, 为什么呢, 因为我觉得他这样不合逻辑, 你path都没给我我凭什么帮你渲染, 我为什么要提这一点哈, 因为我认为我们去学习一个框架或者一个东西的时候, 要带着自己的思维逻辑去学(比如他为什么要这样做...目录下新建一个Redirect.js // react-router/Redirect.js // Redirect组件其实就是用来做重定向的, 其实逻辑也可以非常简单, 当你遇到了Redirect组件

1.3K30
领券