React Native页面跳转报错：Cannot read property 'isReady' of undefined

点击NearbyJobCard组件跳转时出现以下错误：

TypeError: Cannot read property 'isReady' of undefined, js engine: hermes

预期出现“Unmatched route”提示，而非该错误。

相关代码 #

NearbyJobs.jsx #

import { View, Text, TouchableOpacity, ActivityIndicator, Touchable } from 'react-native'
import { useRouter } from 'expo-router'
import { COLORS } from '../../../constants'
import NearbyJobCard from '../../common/cards/nearby/NearbyJobCard'
import useFetch from '../../../hooks/useFetch.js'

import styles from './nearbyjobs.style'

const Nearbyjobs = () => {
  const router = useRouter();
  const { data, isLoading, error } = useFetch("search", {
    query: "React developer",
    num_pages: "1",
  });

  console.log(data)
  console.log(data.length)

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.headerTitle}>
          Nearby jobs
        </Text>
        <TouchableOpacity>
          <Text style={styles.headerBtn}>
            Show all
          </Text>
        </TouchableOpacity>
      </View>
      <View style={styles.cardsContainer}>
        {isLoading ? (
          <ActivityIndicator size="large" color={COLORS.primary} />
        ) : error ? (
          <Text>Something went wrong</Text>
        ) : (
          data?.map((job) => (
            <NearbyJobCard
              job={job}
              key={`nearby-job-${job.job_id}`}
              handleNavigate={() => router.push(`/job-details/${job.job_id}`)}
            />
          ))
        )}
      </View>
    </View>
  )
}

export default Nearbyjobs

NearbyJobCard.jsx #

import { View, Text, TouchableOpacity, Image } from 'react-native'
import { checkImageURL } from '../../../../utils'

import styles from './nearbyjobcard.style'

const NearbyJobCard = ({ job, handleNavigate }) => {
  return (
    <TouchableOpacity
      style={styles.container}
      onPress={() => handleNavigate()}
    >
      <TouchableOpacity style={styles.logoContainer}>
        <Image 
          source={{ uri: checkImageURL(job.employer_logo)
            ? job.employer_logo : "https://t4.ftcdn.net/jpg/05/05/61/73/360_F_505617309_NN1CW7diNmGXJfMicpY9eXHKV4sqzO5H.jpg",}}
          resizeMode="contain"
          style={styles.logoImage}
        />  
      </TouchableOpacity>
      
      <View style={styles.textContainer}>
        <Text style={styles.jobName} numberOfLines={1}>
          {job.job_title}
        </Text>
        <Text style={styles.jobType}>
          {job.job_employment_type}
        </Text>
      </View>
    </TouchableOpacity>
  )
}

export default NearbyJobCard

解决方案 #

1. 修复嵌套的TouchableOpacity #

NearbyJobCard中存在两层嵌套的TouchableOpacity，点击时会触发多次 onPress 事件，导致路由调用异常。将内层的TouchableOpacity替换为View：

// NearbyJobCard.jsx 修改后
<View style={styles.logoContainer}>
  <Image 
    source={{ uri: checkImageURL(job.employer_logo)
      ? job.employer_logo : "https://t4.ftcdn.net/jpg/05/05/61/73/360_F_505617309_NN1CW7diNmGXJfMicpY9eXHKV4sqzO5H.jpg",}}
    resizeMode="contain"
    style={styles.logoImage}
  />  
</View>

2. 确认路由页面存在且配置正确 #

确保Expo Router的路由结构中存在/job-details/[id]对应的页面文件，比如在app目录下创建job-details/[id].jsx（或.tsx）文件。如果路由不存在，Expo Router无法正确初始化路由实例，会导致router对象异常。

3. 确保useRouter在路由上下文内 #

确认Nearbyjobs组件被包裹在Expo Router的路由上下文之中，即组件所在的文件位于app目录下（Expo Router默认的路由根目录），或者被Slot组件渲染，保证useRouter能获取到正确的路由实例。

4. 增加空值保护（可选） #

在调用router.push时增加空值判断，避免router未初始化时触发错误：

// NearbyJobs.jsx 修改handleNavigate
handleNavigate={() => router?.push(`/job-details/${job.job_id}`)}

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