Expo Router问题：跨Tab调用router.push()后无法返回原页面

问题原因 #

React Navigation 中每个 Tab 拥有独立的导航栈。当从非目标 Tab 的页面跳转到目标 Tab 的子页面时，目标 Tab 的栈会被激活（若此前未打开则初始化），此时调用 router.back() 只会操作目标 Tab 的本地栈，自然只能回到目标 Tab 的根页面，无法关联到原发起页面的路由状态。

解决方案：传递来源路由信息，主动跳转回原页面 #

核心思路是在跳转时记录原发起页面的路由名称和参数，在目标页面的返回按钮中，通过 navigation.navigate() 主动跳回原页面，而非依赖 router.back()。

1. 修改跳转组件，传递来源路由参数

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

const Component = () => {
  const navigation = useNavigation();
  // 获取当前页面的路由信息
  const currentRoute = navigation.getCurrentRoute();

  return (
    <Pressable
      onPress={() => {
        // 使用 navigate 跨Tab跳转，同时传递来源路由参数
        navigation.navigate('OtherTab', {
          screen: 'ScreenWithinOtherTabStack',
          params: {
            fromRoute: currentRoute?.name,
            fromParams: currentRoute?.params
          }
        });
      }}
    >
      {/* 组件内容 */}
    </Pressable>
  );
};

2. 修改目标Tab导航器的返回逻辑

const OtherTabNavigator = () => {
  return (
    <Stack
      screenOptions={({ route, navigation }) => ({
        headerLeft: () => {
          const { fromRoute, fromParams } = route.params || {};
          
          // 如果存在来源路由信息，跳回原页面
          if (fromRoute) {
            return (
              <Pressable
                onPress={() => {
                  navigation.navigate(fromRoute, fromParams);
                }}
              >
                {/* 返回按钮UI */}
              </Pressable>
            );
          }

          // 无来源信息时，默认返回目标Tab根页面
          return (
            <Pressable
              onPress={() => router.back()}
            >
              {/* 默认返回按钮UI */}
            </Pressable>
          );
        }
      })}
    >
      {/* 栈内页面配置 */}
    </Stack>
  );
};

备选方案：使用导航栈重置（适用于复杂场景） #

如果需要严格保持原页面的栈层级状态，可以通过父导航器（TabNavigator）切换回原Tab，再在原Tab的栈中恢复状态，仅推荐在必须保留原栈结构时使用：

// 跳转组件中获取父导航器并传递原Tab信息
const Component = () => {
  const navigation = useNavigation();
  const tabNavigator = navigation.getParent();
  const currentRoute = navigation.getCurrentRoute();

  return (
    <Pressable
      onPress={() => {
        tabNavigator?.navigate('OtherTab', {
          screen: 'ScreenWithinOtherTabStack',
          params: {
            fromTab: tabNavigator.getCurrentRoute()?.name,
            fromRoute: currentRoute?.name,
            fromParams: currentRoute?.params
          }
        });
      }}
    >
      {/* 组件内容 */}
    </Pressable>
  );
};

// 目标页面返回时切换回原Tab并跳转回原页面
const ScreenWithinOtherTabStack = ({ route, navigation }) => {
  const { fromTab, fromRoute, fromParams } = route.params || {};
  
  const handleBack = () => {
    const tabNavigator = navigation.getParent();
    tabNavigator?.navigate(fromTab, {
      screen: fromRoute,
      params: fromParams
    });
  };

  return (
    {/* 页面内容 */}
    <Pressable onPress={handleBack}>返回</Pressable>
  );
};

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