React Navigation页面间参数传递突然失效问题求助

我在应用其他模块中成功实现过React Navigation页面间参数传递，但现在该功能突然失效。调用navigation.navigate('HomeScreen', {sort: 'Homes_for_You'})能正常跳转到HomeScreen，但console.log(route.params)输出显示params为undefined。

导航配置代码 #

import { createStackNavigator } from '@react-navigation/stack'

import HomeScreen from '../screens/HomeScreen';
import FilterScreen from '../screens/HomeScreens/FilterScreen';
import SortScreen from '../screens/HomeScreens/SortScreen';

import { SearchFilterSortContextProvider } from '../context/SearchFilterSortContext';

const StackNav = createStackNavigator();

const HomeStackNav = () => {
  return (
    <StackNav.Navigator initialRouteName='HomeScreen' screenOptions={{headerShown: false}}>
      <StackNav.Screen name="HomeScreen" component={HomeScreen}/>
      <StackNav.Screen name="FilterHomeScreen" component={FilterScreen}/>
      <StackNav.Screen name="SortHomeScreen" component={SortScreen}/>
    </StackNav.Navigator>
  )
}

export default HomeStackNav

HomeScreen代码 #

import React, { useEffect} from 'react'
import {View, Text, StyleSheet} from 'react-native'

import SearchAndFilterComponent from '../components/HomeScreen/SearchAndFilterComponent';
import ResultsComponent from '../components/HomeScreen/ResultsComponent';

import { SearchFilterSortContextProvider } from '../context/SearchFilterSortContext';

const HomeScreen = ({navigation, route}) => {

  useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
      console.log(route.params)
    })
    return unsubscribe
  }, [navigation])
  
  return (
    <SearchFilterSortContextProvider>
      <View style={styles.screen}>
        <SearchAndFilterComponent/>
        <View style={styles.fullSplit}></View>
        <ResultsComponent />
      </View>
    </SearchFilterSortContextProvider>
  )
}

const styles = StyleSheet.create({
  fullSplit: {
    width: '100%',
    height: 2,
    backgroundColor: 'black'
  }
})

export default HomeScreen

SortOptionsComponent代码 #

import React, { useContext } from 'react'
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native'
import { Feather } from '@expo/vector-icons'
import { useNavigation } from '@react-navigation/native'

import { SearchFilterSortContext } from '../../context/SearchFilterSortContext'

const SortOptionsComponent = () => {
  const {sort, setSort} = useContext(SearchFilterSortContext)
  const navigation = useNavigation()

  return (
    <View>
        <TouchableOpacity onPress={() => {navigation.navigate('HomeScreen', {sort:'Homes_for_You'})}} style={styles.row}>
          <Text style={styles.text}>Homes For You</Text>
          {
            sort === 'Homes_for_You' ? <Feather name='check' color={'black'} size={20}/> : null
          }
        </TouchableOpacity>
        <TouchableOpacity onPress={() => {navigation.navigate('HomeScreen', {sort:'Newest'})}} style={styles.row}>
          <Text style={styles.text}>Newest</Text>
          {
            sort === 'Newest' ? <Feather name='check' color={'black'} size={20}/> : null
          }
        </TouchableOpacity>
        <TouchableOpacity onPress={() => {navigation.navigate('HomeScreen', {sort:'Price_High_Low'})}} style={styles.row}>
          <View style={styles.rowIcon}>
            <Text style={[styles.text, styles.price]}>Price</Text>
            <Feather name='arrow-down' size={22} color={'black'}/>
          </View>
          {
            sort === 'Price_High_Low' ? <Feather name='check' color={'black'} size={20}/> : null
          }
        </TouchableOpacity>
        <TouchableOpacity onPress={() => {navigation.navigate('HomeScreen', {sort:'Price_Low_High'})}} style={styles.row}>
          <View style={styles.rowIcon}>
            <Text style={[styles.text, styles.price]}>Price</Text>
            <Feather name='arrow-down' size={22} color={'black'}/>
          </View>
          {
            sort === 'Price_Low_High' ? <Feather name='check' color={'black'} size={20}/> : null
          }
        </TouchableOpacity>
        <TouchableOpacity onPress={() => {navigation.navigate('HomeScreen', {sort:'Bedrooms'})}} style={styles.row}>
          <Text style={styles.text}>Bedrooms</Text>
          {
            sort === 'Bedrooms' ? <Feather name='check' color={'black'} size={20}/> : null
          }
        </TouchableOpacity>
        <TouchableOpacity onPress={() => {navigation.navigate('HomeScreen', {sort:'Bathrooms'})}} style={styles.row}>
          <Text style={styles.text}>Bathrooms</Text>
          {
            sort === 'Bathrooms' ? <Feather name='check' color={'black'} size={20}/> : null
          }
        </TouchableOpacity>
        <TouchableOpacity onPress={() => {navigation.navigate('HomeScreen', {sort:'Square_Feet'})}} style={styles.row}>
          <Text style={styles.text}>Sqft.</Text>
          {
            sort === 'Square_Feet' ? <Feather name='check' color={'black'} size={20}/> : null
          }
        </TouchableOpacity>
        <TouchableOpacity onPress={() => {navigation.navigate('HomeScreen', {sort:'Lot_Size'})}} style={styles.row}>
          <Text style={styles.text}>Lot Size</Text>
          {
            sort === 'Lot_Size' ? <Feather name='check' color={'black'} size={20}/> : null
          }
        </TouchableOpacity>
      </View>
  )
}

const styles = StyleSheet.create({
  nav: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center'
  },
  text: {
    fontSize: 17,
    fontWeight: '500'
  },
  row: {
    paddingVertical: 12,
    borderBottomWidth: 1,
    borderBottomColor: 'lightgrey',
    paddingHorizontal: 8,
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center'
  },
  rowIcon: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center'
  },
  price: {
    marginRight: 4
  }
})

export default SortOptionsComponent

控制台输出 #

{"key": "HomeScreen-woUXGRPlOtjfIhEY51Ew1", "name": "HomeScreen", "params": undefined}

问题原因 #

1. 路由复用机制：当HomeScreen已存在于导航栈中时，调用navigation.navigate('HomeScreen', params)不会更新route.params——React Navigation默认复用栈中已存在的页面实例，不会重新传递新参数。
2. 监听回调捕获旧值：useEffect依赖仅设置了navigation，当route.params变化时，回调函数不会重新执行，捕获的仍是组件挂载时的旧route引用，导致打印出undefined。

解决办法 #

方法一：利用已有的Context传递状态（推荐）

你已经通过SearchFilterSortContext管理排序状态，无需通过路由传参，直接在选择排序后更新Context状态再返回上一页即可：

修改SortOptionsComponent的点击事件：

<TouchableOpacity onPress={() => {
  setSort('Homes_for_You'); // 先更新Context状态
  navigation.goBack(); // 返回上一页
}} style={styles.row}>
  {/* ...其他代码 */}
</TouchableOpacity>

之后在HomeScreen中直接从Context获取最新的sort值，无需依赖路由参数。

方法二：更新路由监听逻辑

如果一定要用路由参数传递，需修改HomeScreen的监听逻辑，确保能获取最新的route参数：

1. 导入useFocusEffect和useCallback：

import { useFocusEffect } from '@react-navigation/native';
import React, { useCallback } from 'react';

2. 替换原来的useEffect：

useFocusEffect(
  useCallback(() => {
    console.log(route.params);
  }, [route.params])
);

3. 跳转时使用replace更新页面参数（会替换栈中的HomeScreen实例）：

navigation.replace('HomeScreen', {sort:'Homes_for_You'});

或在React Navigation 6+中，使用navigate的merge选项合并参数：

navigation.navigate('HomeScreen', {sort:'Homes_for_You'}, {merge: true});

内容的提问来源于stack exchange，提问作者ojandali