详解各版本React路由的跳转的方法
更新时间：2018年05月10日 16:53:27 作者：床上不败
这篇文章主要介绍了详解各版本React路由的跳转的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
前言
React-Router已经发布了多个版本，利用路由导航的使用方法都不大一样，在这里总结一下。
React-Router 2.0.0 版本
2.0.0版本需要使用browserHistory进行跳转，具体参考一下代码：
import { browserHistory } from 'react-router'
browserHistory.push('/path')
React-Router 2.4.0版本以上
React-Router 2.4.0版本以上，可以通过mixin的方法，使组件增加this.router属性，然后进行相应的操作，具体mixin代码参考如下：
import { withRouter } from 'react-router';
clsss ABC extends Component {
}
module.exports = withRouter(ABC);
用过mixin的组件，会具有this.router的属性，只需要使用this.props.router.push('/path') 就可以跳转到相应的路由了。
React-Router 3.0.0版本以上
3.0.0版本以后不需要再手动mixin相关的router属性，在任何需要跳转的组件中写this.props.router.push('/path') 就可以跳转到响应的路由了。
React-Router 4.0版本以上
路由的跳转
React-Router 4.0对路由进行了改进，router属性改为了history属性，使用方法还是和3.0差不多，任何需要跳转的地方使用this.props.history.push('/path') 就可以进行跳转了
参数的获取
使用this.props.match.params.xxx 可以获取到当前路由的参数
总结
从以上的使用方法来看，react router的导航使用上变得越来越简单。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
React找不到模块“./index.module.scss”或其相应的类型声明及解决方法
这篇文章主要介绍了React找不到模块“./index.module.scss”或其相应的类型声明及解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09
React函数式组件Hook中的useEffect函数的详细解析
useEffect是react v16.8新引入的特性。我们可以把useEffect hook看作是componentDidMount、componentDidUpdate、componentWillUnmounrt三个函数的组合2022-10-10
这篇文章主要给大家介绍了关于React组件中对子组件children进行加强的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用React具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-06-06
在开发过程中，总是遇到很多列表的显示。当上数量级别的列表渲染于浏览器，终会导致浏览器的性能下降，你可以选择其他方式避免，本文就介绍了虚拟列表来解决这个问题2021-05-05
这篇文章主要为大家介绍了React 悬浮框内容懒加载实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
这篇文章主要为大家详细介绍了react中的双向绑定，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
useState 通过在函数组件里调用它来给组件添加一些内部 state，React 会在重复渲染时保留这个 state，接下来通过一个示例来看看怎么使用 useState吧2021-06-06
这篇文章主要给大家介绍了关于react-draggable实现拖拽功能的相关资料,React-Draggable一个使元素可拖动的简单组件,文中通过代码示例介绍的非常详细,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了React获取DOM和获取组件实例的方式,如何创建refs来获取对应的DOM呢?目前有三种方式，本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-10-10
这篇文章主要为大家介绍了useEvent显著降低Hooks负担的原生Hook示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
最新评论