如何解决react link不跳转问题

react link不跳转的解决办法：1、关闭JS Remotely；2、给根路径route组件增加extra；3、将TouchableOpacITy作为link组件的属性传入即可。

本文操作环境：Windows7系统、react17.0.1、Dell G3。

如何解决react link不跳转问题？

react router native:link点击不跳转

rn嵌入原生，出现点击TouchableOpacity组件内容没反应、不跳转的情况

// App.jsconst history = createMemoryHistory()Router history={
 history }
    >
        Switch>
        Route path="/" component={
 Home }
    />
        Route path="/test" component={
 Test }
     />
        /Switch>
    /Router>
    // Home.jsView>
        Link to="/test">
        TouchableOpacity key={
 text }
 style={
 styles.wrapPEr }
    >
            Text style={
 styles.text }
    >
{
 text }
    /Text>
            /TouchableOpacity>
        /Link>
    /View>
    

1、关闭JS Remotely

不知为何开了远程调试后导致TouchableOpacity失效。关闭后点击能看到TouchableOpacity效果，仍然不能跳转

2、给根路径route组件增加extra

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

因为不熟悉rn开发，最初担心是使用了createMemoryHistory导致的，后来又担心页面跳转了但是被挡住之类的，思路一直偏了

最后老老实实到github上找了一个基础的项目，一点点找不同，才发现是这个被忽视的问题

原理其实很简单 https://www.cnblogs.COM/superlizhao/p/9280122.htML

我有这个问题是因为router4.x使用多层嵌套路由报了warning，调整之后反而暴露不认真读原理的问题，惭愧

3、将TouchableOpacity作为link组件的属性传入

const linkParams = {
    pathname: '/star',    state: {
 data: item }
,}
Link to={
 linkParams }
 component={
 TouchableOpacity }
    >
    Item text={
 item.text }
 index={
 index }
    />
    /Link>
    

link> 里面有TouchableOpacity> 会导致不跳转

推荐学习：《react视频教程》

以上就是如何解决react link不跳转问题的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！