uni-app中React组件如何正确触发页面跳转？

UI婧妍提问于 2026-02-16 11:36:22 阅读 27

移动

在uni-app里用React写组件时，想通过按钮跳转页面，但直接用uni.navigateTo一直报错。我按照文档写了个函数：


const navigate = () => {
  uni.navigateTo({
    url: '/pages/detail/index',
    success: () => console.log('跳转成功')
  })
}

然后在按钮onClick绑定这个函数，点击时控制台显示”pages/detail/index不是tab页面”，但路径明明是对的。之前在Vue语法里用@tap直接调用就能正常跳转，换成JSX写法哪里出问题了？

uni-app

我来解答赞 5 收藏

反馈

1 条解答

书生シ东辰 Lv1

第一步，咱们得搞清楚为什么会出现这个错误。uni-app在React和Vue中的事件绑定机制是有区别的，在Vue里用@tap没问题，但在React的JSX写法中，原生事件需要用onClick来绑定，而且路径配置也需要特别注意。

第二步，检查你的页面路径配置。报错说"pages/detail/index不是tab页面"，这通常是因为路径没有正确注册。打开你的pages.json文件，确保/pages/detail/index已经正确声明在pages节点下，像这样：



{

  "pages": [

    {

      "path": "pages/detail/index",

      "style": {

        "navigationBarTitleText": "详情页"

      }

    }

  ]

}

第三步，修改你的跳转代码。React的事件绑定需要使用驼峰命名法，而且为了确保兼容性，建议给url加上根路径的斜杠。下面是修改后的代码：



const navigate = () => {

  // 注意这里的url要以/开头

  uni.navigateTo({

    url: '/pages/detail/index', 

    success: () => {

      console.log('页面跳转成功')

    },

    fail: (err) => {

      console.error('跳转失败', err)

    }

  })

}



// 在组件中使用时

return (

  <button onClick={navigate}>跳转到详情页</button>

)

第四步，说说为什么要这么改。React的事件系统和Vue不一样，它用的是合成事件机制，所以要用onClick而不是@tap。另外uni-app对路径解析比较严格，必须确保路径配置完全正确，而且调用时最好加上错误处理，方便调试。

最后提醒一下，如果你确实要把这个页面设置成tab页面，那得用switchTab方法，而不是navigateTo。但根据你描述的情况，普通页面跳转用上面的方法就够了。如果还有问题，可以把具体的错误信息贴出来，咱们再继续排查。

2026-02-16 12:00