詳解各版本React路由的跳轉(zhuǎn)的方法
前言
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)的組件中寫(xiě)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í)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
React?中?memo?useMemo?useCallback?到底該怎么用
在React函數(shù)組件中，當(dāng)組件中的props發(fā)生變化時(shí)，默認(rèn)情況下整個(gè)組件都會(huì)重新渲染。換句話說(shuō)，如果組件中的任何值更新，整個(gè)組件將重新渲染，包括沒(méi)有更改values/props的函數(shù)/組件。在react中，我們可以通過(guò)memo，useMemo以及useCallback來(lái)防止子組件的rerender2022-10-10
react自適應(yīng)布局px轉(zhuǎn)rem實(shí)現(xiàn)示例詳解
這篇文章主要為大家介紹了react自適應(yīng)布局px轉(zhuǎn)rem實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
React服務(wù)端渲染和同構(gòu)的實(shí)現(xiàn)
本文主要介紹了React服務(wù)端渲染和同構(gòu)的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
React組件有哪些生命周期函數(shù)？類組件才有的生命周期函數(shù)，分為幾個(gè)階段：掛載，更新，卸載，錯(cuò)誤處理，本文主要介紹了這個(gè)階段，感興趣的可以了解一下2021-06-06
當(dāng)我們使用React編寫(xiě)組件時(shí),組件的重新渲染是一個(gè)重要的概念,本文主要介紹了React組件在什么情況下會(huì)重新渲染,具有一定的參考價(jià)值,感興趣的可以了解一下2023-12-12
ReactNative中使用Redux架構(gòu)總結(jié)
本篇文章主要介紹了ReactNative中使用Redux架構(gòu)總結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
react實(shí)現(xiàn)瀏覽器自動(dòng)刷新的示例代碼
這篇文章主要介紹了react實(shí)現(xiàn)瀏覽器自動(dòng)刷新的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
React + webpack 環(huán)境配置的方法步驟
本篇文章主要介紹了React + webpack 環(huán)境配置的方法步驟，詳解的介紹了開(kāi)發(fā)環(huán)境的配置搭建，有興趣的可以了解一下2017-09-09
React使用高德地圖的實(shí)現(xiàn)示例(react-amap)
這篇文章主要介紹了React使用高德地圖的實(shí)現(xiàn)示例(react-amap)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
這篇文章主要為大家介紹了useEffect中為什么不能使用async的原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07