React Native从Login跳转Notify组件时route.params未定义报错如何解决

问题解决方法 #

1. 先确认Notify组件已正确注册到导航栈 #

只有被注册为导航器Screen的组件，才能默认接收到route和navigation属性：

// 你的导航栈配置示例，检查name和component是否匹配
<Stack.Navigator>
  <Stack.Screen name="Login" component={Login} />
  {/* 确保这里name是'Notify'，和你navigate的目标路由名完全一致 */}
  <Stack.Screen name="Notify" component={Notify} />
</Stack.Navigator>

如果你是手动在其他组件内调用<Notify />渲染，而非通过导航路由跳转渲染，系统不会自动注入route属性，自然会返回undefined。

2. 改用useRoute钩子主动获取路由参数 #

如果确认注册无误，可以不用依赖props传入的route，直接用React Navigation提供的useRoute钩子主动获取，同时加可选链访问避免报错：
首先在Notify.js顶部导入钩子：

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

修改组件代码：

export const Notify = ({ navigation }) => {
    const route = useRoute();
    // 用可选链访问，避免无参数时抛出错误
    const itemId = route?.params?.itemId;
    const otherParam = route?.params?.otherParam;
    // 后续业务逻辑
}

3. 兜底兼容无参数场景 #

如果存在进入Notify页面不带参数的场景，可以给参数设置默认值：

const { itemId = 0, otherParam = '' } = route?.params || {};

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