使用React Native Expo Router传参报错：Cannot read property 'params' of undefined

出现这个错误的核心原因是你在Expo Router环境中试图通过传统React Navigation的props.route获取参数，但Expo Router的组件默认不会接收route作为props，或者你的路由配置/参数传递方式存在问题。以下是具体的解决方法：

方法一：使用Expo Router官方推荐的useLocalSearchParams钩子 #

Expo Router基于文件系统路由，提供了专属的参数获取钩子，无需依赖props.route：

修改商品页面代码 #

import { useLocalSearchParams } from 'expo-router';
import { View, Text } from 'react-native';

export default function ProductScreen() {
  // 获取路由参数
  const params = useLocalSearchParams();
  
  // 如果传递的是对象类型，需要先解析（因为URL参数会被序列化为字符串）
  const getProduct = params.item ? JSON.parse(params.item) : null;
  
  console.log("Products ", getProduct);
  return (
    <View>
      <Text>ProductScreen</Text>
    </View>
  );
}

跳转时正确传递参数（列表页面示例） #

import { useRouter } from 'expo-router';

const router = useRouter();

// 点击商品时触发跳转
const handleProductClick = (product) => {
  // 传递对象参数时需序列化为JSON字符串
  router.push('/(prod)/product', { item: JSON.stringify(product) });
};

方法二：改用React Navigation的useRoute钩子（适配传统Stack配置） #

如果你坚持使用React Navigation的参数传递逻辑，需要确保组件能正确接收route props：

修改Stack配置 #

将商品页面直接作为Stack.Screen的组件，而非指向路由组：

import { Stack } from 'expo-router';
import ProductScreen from './app/(prod)/ProductScreen';

export default function RootLayout() {
  return (
    <Stack screenOptions={{headerShown: false}}>
      <Stack.Screen name="(tabs)" />
      <Stack.Screen name="product" component={ProductScreen} />
    </Stack>
  );
}

修改商品页面代码 #

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

export default function ProductScreen() {
  const route = useRoute();
  const getProduct = route?.params?.item;
  
  console.log("Products ", getProduct);
  return (
    <View>
      <Text>ProductScreen</Text>
    </View>
  );
}

跳转时传递参数（列表页面示例） #

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

const navigation = useNavigation();

const handleProductClick = (product) => {
  navigation.navigate('product', { item: product });
};

关键检查点 #

• 确认跳转时确实传递了item参数，没有遗漏
• 如果使用URL参数传递对象，必须进行JSON序列化/反序列化，避免参数丢失
• 确保(prod)路由组对应的页面文件存在于app/(prod)/目录下

内容的提问来源于stack exchange，提问作者zakria-abdelgny