怎么解決react link不跳轉(zhuǎn)問題

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

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í)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!