How to solve the problem of react link not jumping

Solutions for react link not jumping: 1. Turn off JS Remotely; 2. Add extra to the root path route component; 3. Pass TouchableOpacity as an attribute of the link component.

The operating environment of this article: Windows7 system, react17.0.1, Dell G3.

How to solve the problem of react link not jumping?

react router native:link click does not jump

rnembed native, click the TouchableOpacity component content does not respond, does not jump

// 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, Turn off JS Remotely

I don’t know why TouchableOpacity fails after remote debugging is turned on. After closing, you can see the TouchableOpacity effect by clicking on it, but still cannot jump.

2. Add extra

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

to the root path route component. Because I am not familiar with rn development, I was initially worried that it was caused by using createMemoryHistory. Later, I was worried that the page would jump but be blocked, etc., and my thoughts kept going astray

Finally, I honestly went to github to find a basic project, and after looking for differences little by little, I found that this was the one that had been ignored. Problem

The principle is actually very simple https://www.cnblogs.com/superlizhao/p/9280122.html

I have this problem because router4.x uses multi-layer nested routing reports Warning, after adjustment, it exposed the problem of not reading the principle carefully, I feel ashamed

3. Pass TouchableOpacity as a property of the link component

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

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

There will be Resulting in no jump

Recommended learning: "react video tutorial"

The above is the detailed content of How to solve the problem of react link not jumping. For more information, please follow other related articles on the PHP Chinese website!