詳解各版本React路由的跳轉的方法

發布時間：2020-09-23 09:13:52 來源：腳本之家閱讀：342 作者：床上不敗欄目：web開發

前言

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的導航使用上變得越來越簡單。希望對大家的學習有所幫助，也希望大家多多支持億速云。

向AI問一下細節

中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站