Expo Router中如何避免快速触发router.push/replace导致重复导航？

目前Expo Router（截至v2.x版本）并没有内置的safePush()这类带防抖或导航锁定的方法，也没有全局的导航防护机制，需要手动处理快速点击的问题。下面是几种实用的解决方案：

局部防抖处理 #

给单个导航按钮添加防抖逻辑，限制短时间内的重复触发：

• 用lodash的debounce快速实现：

import { router } from 'expo-router';
import { debounce } from 'lodash';

// 500ms内只允许执行一次导航
const safePush = debounce((path) => {
  router.push(path);
}, 500);

// 按钮中使用
<Button onPress={() => safePush('/details')} title="查看详情" />

• 不用第三方库，自己写简单的状态锁：

import { router } from 'expo-router';

let isNavigating = false;

const safePush = (path) => {
  if (isNavigating) return;
  isNavigating = true;
  router.push(path);
  // 500ms后解锁，也可以结合导航完成的回调来重置（如果有）
  setTimeout(() => {
    isNavigating = false;
  }, 500);
};

全局封装导航工具 #

创建一个全局的导航工具类，统一处理所有导航的防抖逻辑，避免每个组件重复写代码：
新建utils/navigationUtils.js：

import { router } from 'expo-router';

let isNavigating = false;
const NAV_DEBOUNCE_MS = 500;

export const safePush = (path) => {
  if (isNavigating) return;
  isNavigating = true;
  router.push(path);
  setTimeout(() => {
    isNavigating = false;
  }, NAV_DEBOUNCE_MS);
};

export const safeReplace = (path) => {
  if (isNavigating) return;
  isNavigating = true;
  router.replace(path);
  setTimeout(() => {
    isNavigating = false;
  }, NAV_DEBOUNCE_MS);
};

然后在任意组件中导入使用：

import { safePush } from '../utils/navigationUtils';

<Button onPress={() => safePush('/profile')} title="进入个人中心" />

利用导航状态判断 #

通过Expo Router的useRouter提供的状态，判断当前是否正在进行导航过渡，避免重复触发：

import { useRouter } from 'expo-router';
import { useCallback } from 'react';

const HomeScreen = () => {
  const router = useRouter();

  const safePush = useCallback((path) => {
    // 检查是否处于导航过渡状态
    if (router.state?.navigation?.isTransitioning) return;
    router.push(path);
  }, [router]);

  return <Button onPress={() => safePush('/settings')} title="进入设置" />;
};

注意：这个方法依赖Expo Router内部的状态字段，不同版本可能有变化，使用前建议测试兼容性。

这些方案都能有效解决快速点击导致的重复导航或异常问题，全局封装的方式更适合大型项目，能统一管理导航逻辑。

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