這篇文章主要介紹了怎么解決react link不跳轉(zhuǎn)問題，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(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)站制作、網(wǎng)站設(shè)計(jì)，秀英網(wǎng)站改版等技術(shù)服務(wù)。擁有十余年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

react link不跳轉(zhuǎn)的解決辦法：1、關(guān)閉JS Remotely；2、給根路徑route組件增加extra；3、將TouchableOpacity作為link組件的屬性傳入即可。

本文操作環(huán)境：Windows7系統(tǒng)、react17.0.1、Dell G3。

react router native:link點(diǎn)擊不跳轉(zhuǎn)

rn嵌入原生，出現(xiàn)點(diǎn)擊TouchableOpacity組件內(nèi)容沒反應(yīng)、不跳轉(zhuǎn)的情況

// App.js
const history = createMemoryHistory()
<Router history={ history }>
    <Switch>
        <Route path="/" component={ Home }/>
        <Route path="/test" component={ Test } />
    </Switch>
</Router>


// Home.js
<View>
    <Link to="/test">
        <TouchableOpacity key={ text } style={ styles.wrapper }>
            <Text style={ styles.text }>{ text }</Text>
        </TouchableOpacity>
    </Link>
</View>

1、關(guān)閉JS Remotely

不知為何開了遠(yuǎn)程調(diào)試后導(dǎo)致TouchableOpacity失效。關(guān)閉后點(diǎn)擊能看到TouchableOpacity效果，仍然不能跳轉(zhuǎn)

2、給根路徑route組件增加extra

// App.js
<Router history={ history }>
    <Switch>
        <Route extra path="/" component={ Home }/> // 增加extra
        <Route path="/test" component={ Test } />
    </Switch>
</Router>

因?yàn)椴皇煜n開發(fā)，最初擔(dān)心是使用了createMemoryHistory導(dǎo)致的，后來又擔(dān)心頁面跳轉(zhuǎn)了但是被擋住之類的，思路一直偏了

最后老老實(shí)實(shí)到github上找了一個(gè)基礎(chǔ)的項(xiàng)目，一點(diǎn)點(diǎn)找不同，才發(fā)現(xiàn)是這個(gè)被忽視的問題

原理其實(shí)很簡單 https://www.cnblogs.com/superlizhao/p/9280122.html

我有這個(gè)問題是因?yàn)閞outer4.x使用多層嵌套路由報(bào)了warning，調(diào)整之后反而暴露不認(rèn)真讀原理的問題，慚愧

3、將TouchableOpacity作為link組件的屬性傳入

const linkParams = {
    pathname: '/star',
    state: { data: item },
}

<Link to={ linkParams } component={ TouchableOpacity }>
    <Item text={ item.text } index={ index }/>
</Link>

<link>里面有<TouchableOpacity>會導(dǎo)致不跳轉(zhuǎn)

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“怎么解決react link不跳轉(zhuǎn)問題”這篇文章對大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

網(wǎng)站題目：怎么解決reactlink不跳轉(zhuǎn)問題
網(wǎng)站URL：http://chinadenli.net/article28/gohijp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊、網(wǎng)站營銷、軟件開發(fā)、Google、網(wǎng)站內(nèi)鏈、網(wǎng)站維護(hù)

廣告

聲明：本網(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)