React Native Navigation 5出现TypeError: route is undefined错误如何解决？

报错触发原因 #

• 依赖不完整/版本不匹配：React Navigation 5 运行需要同时安装@react-navigation/native、@react-navigation/stack以及两个原生依赖react-native-screens、react-native-safe-area-context，缺失任意依赖或者版本和框架不兼容都会触发route is undefined报错。
• 无用引入的组件存在逻辑问题：你的代码中引入了未使用的AppLogo组件，如果该组件内部直接调用了未定义的route对象（比如未从props接收，也没有调用路由钩子获取就直接访问route.params），哪怕组件没有在导航树中渲染，模块加载时也会触发该报错。
• 原生依赖未完成链接：React Native 0.60以下版本不会自动链接原生依赖，手动链接失败也会触发该类路由底层报错。

修复步骤 #

1. 重新安装匹配版本的完整依赖：
   npm环境执行：

npm install @react-navigation/native@5.x @react-navigation/stack@5.x react-native-screens react-native-safe-area-context

yarn环境执行：

yarn add @react-navigation/native@5.x @react-navigation/stack@5.x react-native-screens react-native-safe-area-context

2. iOS端额外执行原生依赖安装：

cd ios && pod install && cd ..

3. 修正代码逻辑：
   删除代码中无用的import AppLogo from "./modules/AppLogo";语句。如果需要用到AppLogo组件且组件内要访问路由信息，使用官方提供的useRoute钩子主动获取：

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

function AppLogo() {
  const route = useRoute();
  // 后续业务逻辑
}

4. 清理缓存重启项目：

npx react-native start --reset-cache

重启后重新运行应用即可解决该报错。

内容的提问来源于stack exchange，提问作者Kıvanç.A