本文小編為大家詳細(xì)介紹“react的withrouter怎么用”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“react的withrouter怎么用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

成都創(chuàng)新互聯(lián)公司長期為上千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為清水企業(yè)提供專業(yè)的網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)，清水網(wǎng)站改版等技術(shù)服務(wù)。擁有十余年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

react withrouter用于將一個(gè)組件包裹進(jìn)Route里面，并將“react-router”的三個(gè)history、location、match對象傳入props對象，引入語法為“import{withRouter}from...”。

本教程操作環(huán)境：Windows10系統(tǒng)、react17.0.1版、Dell G3電腦。

react withrouter的用法是什么

withRouter的作用就是, 如果我們某個(gè)東西不是一個(gè)Router, 但是我們要依靠它去跳轉(zhuǎn)一個(gè)頁面, 比如點(diǎn)擊頁面的logo, 返回首頁, 這時(shí)候就可以使用withRouter來做.withRouter,

作用是將一個(gè)組件包裹進(jìn)Route里面, 然后react-router的三個(gè)對象history, location, match就會被放進(jìn)這個(gè)組件的props屬性中.（我的理解加上之后可以寫編程時(shí)導(dǎo)航，不想vue可以在全局用this.$router.push(）來完成)

將react-router 的 history、location、match 三個(gè)對象傳入props對象

默認(rèn)情況下必須是經(jīng)過路由匹配渲染的組件才存在this.props，才擁有路由參數(shù)，才能使用 函數(shù)跳轉(zhuǎn) 的寫法，執(zhí)行this.props.history.push('/detail')跳轉(zhuǎn)到對應(yīng)路由的頁面

然而不是所有組件都直接與路由相連（通過路由跳轉(zhuǎn)到此組件）的，當(dāng)這些組件需要路由參數(shù)時(shí)，使用withRouter就可以給此組件傳入路由參數(shù)，此時(shí)就可以使用this.props

如何使用withRouter：

比如app.js這個(gè)頁面，不是通過路由跳轉(zhuǎn)過來的，而是直接從瀏覽器中輸入地址打開的，如果不使用withRouter, 此組件的this.props為空，沒法執(zhí)行props中的history、location、match等方法, 如: 函數(shù)式跳轉(zhuǎn)this.props.push('/detail')

設(shè)置withRouter很簡單只需要兩步：1引入, 2執(zhí)行, 如下

import React,{Component} from 'react'
import {Switch,Route,NavLink,Redirect,withRouter} from 'react-router-dom' //引入withRouter
import One from './One'
import NotFound from './NotFound'
class App extends Component{
    //此時(shí)才能獲取this.props,包含（history, match, location）三個(gè)對象
    console.log(this.props);  //輸出{match: {…}, location: {…}, history: {…}, 等}
    render(){return (<div className='app'>
            <NavLink to='/one/users'>HOME</NavLink>
            <NavLink to='/one/companies'>OTHER</NavLink>
            <Switch>
                <Route path='/one/:type?' component={One} />
                <Redirect from='/' to='/one' exact />
                <Route component={NotFound} />
            </Switch>
        </div>)
    }
}
export default withRouter(App);  //這里要執(zhí)行一下WithRouter

讀到這里，這篇“react的withrouter怎么用”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享標(biāo)題：react的withrouter怎么用
鏈接分享：http://jinyejixie.com/article24/pgioje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供、商城網(wǎng)站、軟件開發(fā)、App開發(fā)、網(wǎng)站排名、移動(dòng)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)