Expo Router中如何返回目标页面并移除导航历史中的中间页面？

嘿，我之前正好碰到过一模一样的需求，太懂你用router.back()来回退，却发现中间页面还赖在栈里的郁闷了！

你的场景是导航栈现在是 Home → Calendar → Template → AddReminder，想从AddReminder直接切回Calendar，同时把Template和AddReminder从历史里彻底清掉，让返回键直接跳回Home对吧？

别再用router.back()凑活了，这种方式只是一步步弹出当前页面，中间的Template还会留在栈里。Expo Router专门给这种场景准备了router.reset()方法——它能直接重置整个导航栈的结构，完全按你想要的样子来配置。

具体实现步骤 #

首先确保你已经导入了Expo Router的router：

import { router } from 'expo-router';

然后在AddReminder页面的返回按钮点击事件里，调用router.reset()并传入你想要保留的导航栈数组：

const goBackToCalendar = () => {
  // 直接把导航栈重置为 Home → Calendar
  router.reset([
    { name: 'Home' },
    { name: 'Calendar' },
  ]);
};

把这段逻辑绑到按钮上，给你个完整的页面示例：

import { View, Button } from 'react-native';
import { router } from 'expo-router';

export default function AddReminder() {
  const goBackToCalendar = () => {
    router.reset([
      { name: 'Home' },
      { name: 'Calendar' },
    ]);
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="回到日历（清除中间历史）" onPress={goBackToCalendar} />
    </View>
  );
}

另一种简化写法（注意坑点） #

如果你不想手动写完整的栈结构，也可以用router.navigate配合reset选项直接跳转：

router.navigate({
  pathname: '/Calendar', // 这里要和你的实际路由路径完全对应
  reset: true,
});

不过要注意：这个写法会把栈重置为只有Calendar页面，此时按返回键会直接退出应用，而不是回到Home。所以如果你需要保留Home→Calendar的栈结构，还是用router.reset()传入数组的方式更稳妥。

另外要提醒下：name的取值要和你app目录下的路由文件名完全匹配，比如Calendar页面是app/Calendar.js，那name就是'Calendar'；如果是app/calendar/index.js，那name就是'calendar'，大小写别写错哦！

这么操作之后，你在Calendar页面按返回键就会直接回到Home，Template和AddReminder完全从导航历史里消失了，完美解决你的问题～

内容来源于stack exchange