Expo Router（文件路由）返回导航异常问题求助

路由结构 #

• Home（/(tabs)）：展示福利列表子集，点击福利项跳转至详情页/benefits/[id]，含“View All”按钮跳转至Benefits页/benefits
• Benefits（/benefits）：展示完整福利列表，点击福利项跳转至详情页/benefits/[id]
• Benefit Details（/benefits/[id]）：展示福利详情，返回按钮定义在/benefits/_layout.tsx中

问题复现步骤 #

1. 从Home页点击“View All”进入/benefits
2. 选择任意福利进入详情页/benefits/[id]
3. 点击返回按钮回到/benefits，再次点击返回时，未直接回到Home，而是先显示之前从Home进入的首个福利详情页，需再次点击才能回到Home

代码片段 #

Home Screen #

<Link href="/benefits">
  View All
</Link>
<FlatList
  data={filteredStores.slice(0, 5)}
  renderItem={({ item }: { item: IStore }) => (
    <Link href={`/benefits/${item._id}`} asChild>
      <TouchableOpacity>
        {/* Benefit item content */}
      </TouchableOpacity>
    </Link>
  )}
  keyExtractor={(item: IStore) => item._id}
  horizontal
  contentContainerStyle={{ paddingHorizontal: 18, gap: 18 }}
  showsHorizontalScrollIndicator={false}
/>

Benefits Screen #

<FlatList
  data={stores}
  renderItem={({ item }: { item: IStore }) => (
    <Link href={`/benefits/${item._id}`} asChild>
      <TouchableOpacity>
        {/* Benefit item content */}
      </TouchableOpacity>
    </Link>
  )}
/>

/benefits/_layout.tsx #

<Stack.Screen
  name="[id]"
  options={{
    headerTitle: '',
    headerShown: true,
    headerTransparent: true,
    headerStyle: { backgroundColor: 'transparent' },
    headerLeft: () => (
      <HeaderBackButton
        onPress={() => router.back()}
        style={{
          borderRadius: 50,
          backgroundColor: 'rgba(0,0,0,0.2)',
          padding: 1,
          paddingLeft: 1,
          width: 35,
          height: 35,
          marginLeft: Platform.OS === 'ios' ? -5 : 0,
        }}
        tintColor="white"
      />
    ),
  }}
></Stack.Screen>

已尝试方案 #

• 在<Link>组件中组合使用push和replace属性调整导航历史，未解决
• 为URL添加from参数，根据参数修改返回逻辑，未完全解决问题

解决方案 #

方案1：修改Home页“View All”跳转行为为替换栈 #

将Home页中的“View All”链接改为使用replace模式，跳转至/benefits时会替换当前栈中的位置，避免保留之前从Home进入详情页的历史记录：

<Link href="/benefits" replace>
  View All
</Link>

原理：默认<Link>使用push模式会向导航栈添加新条目，而replace会替换当前栈顶条目，这样从/benefits返回时会直接回到Home页，不会经过之前的详情页。

方案2：优化返回按钮逻辑（补充方案） #

如果方案1无法覆盖所有场景，可在/benefits/_layout.tsx中判断当前路由来源，当从/benefits返回时直接跳转至Home页：

import { usePathname } from 'expo-router';

// 在Stack.Screen的headerLeft中修改：
headerLeft: () => {
  const pathname = usePathname();
  return (
    <HeaderBackButton
      onPress={() => {
        if (pathname === '/benefits') {
          // 当前在Benefits列表页，直接跳转到Home
          router.replace('/(tabs)');
        } else {
          // 当前在详情页，返回上一页
          router.back();
        }
      }}
      style={{
        borderRadius: 50,
        backgroundColor: 'rgba(0,0,0,0.2)',
        padding: 1,
        paddingLeft: 1,
        width: 35,
        height: 35,
        marginLeft: Platform.OS === 'ios' ? -5 : 0,
      }}
      tintColor="white"
    />
  );
}

注意：需确保/(tabs)是Home页的正确路由路径，根据实际项目调整。

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