Expo Router深度动态导航异常：无法从人员页跳转至影片页

问题描述 #

使用Expo Router开发时遇到深度导航异常：

• 可从路由 /(tabs)/(movies)/[movieId] 正常跳转到 /(tabs)/(movies)/(person)/[personId]
• 无法从 /(tabs)/(movies)/(person)/[personId] 跳转回 /(tabs)/(movies)/[movieId]，点击跳转后页面无变化，停留在原页面

两种场景共用同一个跳转组件，尝试过两种实现方式：

方式1：使用 router.push #

export default function VerticalCard({ data }: ListItem) {
  return (
      <Pressable style={styles.itemContainer} onPress={() => router.push(`/(tabs)/(movies)/${data.id}`)}>
        ...
      </Pressable>
  );
}

方式2：使用 Link 组件 #

<Link href={`/(tabs)/(movies)/${data.id}`} asChild>
  <Pressable style={styles.itemContainer}>
    ...
  </Pressable>
</Link>

当前依赖版本：

{
  "dependencies": { 
    "expo": "~52.0.11", 
    "expo-router": "~4.0.9", 
    "react": "18.3.1",
    ...
  }
}

解决方案 #

1. 替换跳转方法为 router.replace #

从深层嵌套路由跳转回上层动态路由时，push 可能因路由栈的嵌套逻辑无法正确更新页面，改用 replace 直接替换当前路由栈条目：

onPress={() => router.replace(`/(tabs)/(movies)/${data.id}`)}

2. 简化路由路径 #

Expo Router的分组目录（如(movies)、(person)）是逻辑分组，跳转时可省略冗余的分组标记，直接使用简洁路径：

// 绝对路径（跳过内部分组）
router.push(`/tabs/movies/${data.id}`)
// 相对路径（适用于层级明确的场景）
router.push(`../${data.id}`)

3. 检查路由文件与布局配置 #

• 确认 /(tabs)/(movies)/[movieId].tsx 文件存在，文件名与路由参数完全匹配（注意大小写）
• 检查 (movies) 目录下的 _layout.tsx 是否包含 <Slot /> 组件，确保子路由能正确渲染，同时父级路由的栈逻辑正常

4. 清除缓存重启服务 #

Expo Router的缓存可能导致路由逻辑异常，执行以下操作重置：

• 关闭开发服务器
• 删除项目根目录的 .expo 文件夹
• 执行 npx expo start -c 清除缓存并重启

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