Expo Router重复跳转同一路径后，返回无法逐级回退的问题

1. 修正路由路径笔误 #

你的点击事件中写的是/pattern/[id]，但实际目录结构是item，先把路径修正为对应路由：

const handlePress = (label: string) => {
    router.push({
      pathname: `/item/[id]`,
      params: { id: label, from: from },
    });
  };

2. 配置Stack允许重复入栈 #

在item/_layout.tsx的Stack.Screen中添加stackPresentation: 'push'选项，强制每次push都创建新页面实例，而非复用现有页面：

<Stack>
    <Stack.Screen 
        name="[id]" 
        options={{ stackPresentation: 'push' }}
    />
</Stack>

该配置会让Expo Router在遇到同路径路由的push操作时，直接在栈中新增页面，而非仅更新当前页面参数。

3. 验证路由栈状态（排查用） #

如果问题仍存在，可以打印路由栈信息确认页面是否成功入栈：

import { useRouter } from 'expo-router';

const router = useRouter();
// 在组件渲染时打印栈结构
console.log(router.state?.routes);

通过输出可以查看每次push后，栈内是否新增了对应的item/[id]页面。

4. 手动维护历史栈（备选方案） #

若以上方法无效，可手动维护访问历史，自定义回退逻辑：

// 可通过全局状态或页面内状态维护访问过的id列表
const [history, setHistory] = useState<string[]>([]);

// 跳转时更新历史
const handlePress = (label: string) => {
  setHistory(prev => [...prev, label]);
  router.push(`/item/${label}`);
};

// 自定义回退逻辑
const handleBack = () => {
  if (history.length > 1) {
    const newHistory = history.slice(0, -1);
    setHistory(newHistory);
    router.push(`/item/${newHistory[newHistory.length - 1]}`);
  } else {
    router.back();
  }
};

然后将返回按钮的onPress替换为handleBack。

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