前言

React-Router已經(jīng)發(fā)布了多個(gè)版本，利用路由導(dǎo)航的使用方法都不大一樣，在這里總結(jié)一下。

React-Router 2.0.0 版本

2.0.0版本需要使用browserHistory進(jìn)行跳轉(zhuǎn)，具體參考一下代碼：

import { browserHistory } from 'react-router'browserHistory.push('/path')

React-Router 2.4.0版本以上

React-Router 2.4.0版本以上，可以通過(guò)mixin的方法，使組件增加this.router屬性，然后進(jìn)行相應(yīng)的操作，具體mixin代碼參考如下：

import { withRouter } from 'react-router';clsss ABC extends Component {}module.exports = withRouter(ABC);

用過(guò)mixin的組件，會(huì)具有this.router的屬性，只需要使用this.props.router.push('/path') 就可以跳轉(zhuǎn)到相應(yīng)的路由了。

React-Router 3.0.0版本以上

3.0.0版本以后不需要再手動(dòng)mixin相關(guān)的router屬性，在任何需要跳轉(zhuǎn)的組件中寫this.props.router.push('/path') 就可以跳轉(zhuǎn)到響應(yīng)的路由了。

React-Router 4.0版本以上

路由的跳轉(zhuǎn)

React-Router 4.0對(duì)路由進(jìn)行了改進(jìn)，router屬性改為了history屬性，使用方法還是和3.0差不多，任何需要跳轉(zhuǎn)的地方使用this.props.history.push('/path') 就可以進(jìn)行跳轉(zhuǎn)了

參數(shù)的獲取

使用this.props.match.params.xxx 可以獲取到當(dāng)前路由的參數(shù)

總結(jié)

從以上的使用方法來(lái)看，react router的導(dǎo)航使用上變得越來(lái)越簡(jiǎn)單。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持錯(cuò)新站長(zhǎng)站。