React Native中用React Navigation跳转时参数传不过去怎么办？

Zz志青提问于 2026-03-13 19:46:25 阅读 10

框架

我在用React Navigation v6做页面跳转，从首页传个id到详情页，但接收不到参数，打印出来是undefined。明明文档里说用route.params.id就能拿到，是不是哪里写错了？

我试过在navigate的时候传对象，在目标页面也用了route.params，但就是拿不到。下面是我简化后的Vue风格伪代码（实际项目是React Native，但逻辑类似）：

<template>
  <button @click="goToDetail">查看详情</button>
</template>

<script>
export default {
  methods: {
    goToDetail() {
      this.$router.push({ name: 'Detail', params: { id: 123 } });
    }
  }
}
</script>

React Native里我写的其实是 navigation.navigate(‘Detail’, { id: 123 })，但Detail页面里 route.params 始终是空的，求解！

性能优化

我来解答赞 1 收藏

反馈

1 条解答

东方佳佳 Lv1

这个问题很常见，先检查一下你的Detail页面是怎么写的。

如果用的是函数组件，正确写法应该是用 useRoute 这个hook：

import { useRoute } from '@react-navigation/native';



function DetailScreen() {

  const route = useRoute();

  const { id } = route.params || {}; // 加个兜底防止报错

  

  console.log('收到的id:', id);

  return ID: {id};

}

或者直接从props解构：

function DetailScreen({ route }) {

  const { id } = route.params || {};

  return ID: {id};

}

你看看是不是漏了 useRoute() 这步？很多从旧版本迁移过来的或者刚上手的，容易直接用 route.params 但没意识到函数组件需要hook来获取route对象。

还有一个可能：如果你是用 replace 跳转而不是 navigate，或者跳转后页面重新mount了，params也可能丢。确认一下是用 navigation.navigate('Detail', { id: 123 }) 没错吧？

打印一下 route 看看里面到底有什么，基本就能定位了。

2026-03-13 20:05