詳解各版本React路由的跳轉(zhuǎn)的方法
前言
React-Router已經(jīng)發(fā)布了多個版本，利用路由導(dǎo)航的使用方法都不大一樣，在這里總結(jié)一下。
React-Router 2.0.0 版本
2.0.0版本需要使用browserHistory進行跳轉(zhuǎn)，具體參考一下代碼：
import { browserHistory } from 'react-router'
browserHistory.push('/path')
React-Router 2.4.0版本以上
React-Router 2.4.0版本以上，可以通過mixin的方法，使組件增加this.router屬性，然后進行相應(yīng)的操作，具體mixin代碼參考如下：
import { withRouter } from 'react-router';
clsss ABC extends Component {
}
module.exports = withRouter(ABC);
用過mixin的組件，會具有this.router的屬性，只需要使用this.props.router.push('/path') 就可以跳轉(zhuǎn)到相應(yīng)的路由了。
React-Router 3.0.0版本以上
3.0.0版本以后不需要再手動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對路由進行了改進，router屬性改為了history屬性，使用方法還是和3.0差不多，任何需要跳轉(zhuǎn)的地方使用this.props.history.push('/path') 就可以進行跳轉(zhuǎn)了
參數(shù)的獲取
使用this.props.match.params.xxx 可以獲取到當前路由的參數(shù)
總結(jié)
從以上的使用方法來看，react router的導(dǎo)航使用上變得越來越簡單。希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
react中使用heatmap.js實現(xiàn)熱力圖的繪制
heatmap.js?是一個用于生成熱力圖的?JavaScript?庫,React?是一個流行的?JavaScript?庫,用于構(gòu)建用戶界面,本小編給大家介紹了在React?應(yīng)用程序中使用heatmap.js實現(xiàn)熱力圖的繪制的示例,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2023-12-12
這篇文章主要給大家介紹了關(guān)于React進階之組件的解耦之道，文中通過詳細的示例代碼給大家介紹了組件分割與解耦的方法，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-08-08
這篇文章主要介紹了react?redux的原理以及基礎(chǔ)使用講解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
本篇文章主要介紹了ReactJS實現(xiàn)表單的單選多選和反選的示例，非常具有實用價值，需要的朋友可以參考下2017-10-10
這篇文章主要介紹了React之虛擬DOM的實現(xiàn)原理分析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了基于Webpack4和React hooks搭建項目的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
詳解Jotai Immer如何實現(xiàn)undo redo功能示例詳解
這篇文章主要為大家介紹了詳解Jotai Immer如何實現(xiàn)undo redo功能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
React?高階組件與Render?Props優(yōu)缺點詳解
這篇文章主要weidajai?介紹了React?高階組件與Render?Props優(yōu)缺點詳解,有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
這篇文章主要介紹了react 應(yīng)用多入口配置及實踐總結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
React Hook - 自定義Hook的基本使用和案例講解
自定義Hook本質(zhì)上只是一種函數(shù)代碼邏輯的抽取，嚴格意義上來說，它本身并不算React的特性，這篇文章主要介紹了React類組件和函數(shù)組件對比-Hooks的介紹及初體驗,需要的朋友可以參考下2022-11-11