您好,登錄后才能下訂單哦!
本文小編為大家詳細(xì)介紹“React路由攔截模式及withRouter怎么實(shí)現(xiàn)”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“React路由攔截模式及withRouter怎么實(shí)現(xiàn)”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學(xué)習(xí)新知識(shí)吧。
在前面兩篇 路由博客基礎(chǔ)上,我們將ReactRouter.js
的我的profile
路由設(shè)置成路由攔截的:
<Route path="/profile" render={() => isAuth() ? <Profile/> : <Redirect to="/login"></Redirect> }></Route>
新建Login.js
組件,寫入代碼:
import React, { Component } from 'react' export default class Login extends Component { render() { return ( <div> <h3>Login</h3> <input type="text"></input> <button onClick={() => { localStorage.setItem('token', 123 ) this.props.history.push('/profile') }}>模擬登錄</button> </div> ) } }
效果:
之前帶#
號(hào)的路由模式為哈西模式,如果想不帶#
號(hào)的話,可以寫成如下:
但是BrowserRouter
沒有#
路徑,后端如果沒有對(duì)應(yīng)的路徑處理邏輯,就會(huì)404。
如果我們?cè)谖业捻撁胬锩孢€有我的訂單路由的話,那么在Profile.js
中寫入跳轉(zhuǎn)的語法:
import React from 'react' export default function Profile(props) { return ( <div> <h2>Profile</h2> <div onClick={() => { props.history.push('/profileorder') }}>我的訂單</div> </div> ) }
可以看到報(bào)錯(cuò)了,那我們之前那種寫法不生效了嗎。其實(shí)跟路由的創(chuàng)建有關(guān)系,之前是直接將組件用component
屬性直接傳了過去,所以props
有history
對(duì)象,但是這次我們是采用的render
將組件在立即函數(shù)中實(shí)例化了,不傳進(jìn)去:
所以在這里props
接收不到任何東西,是非常正常的。在使用render
的路由時(shí),我們可以這樣傳參:
通過傳props
那么子組件中將有路由的一些屬性,就可以做跳轉(zhuǎn)。如果在路由組件上不傳props
的話,那么將使用withRouter
進(jìn)行跳轉(zhuǎn)。將props
刪除:
可以看到即使render
的路由父組件不傳props
,我們使用withRouter
,也能夠進(jìn)行路由的跳轉(zhuǎn)。
讀到這里,這篇“React路由攔截模式及withRouter怎么實(shí)現(xiàn)”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì),如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。