如何避免Expo Router重定向前短暂跳转到上一页

我在React Native应用中使用Expo Router，尝试在特定条件下点击返回按钮时将用户重定向到其他页面，使用的代码如下：

useEffect(() => {
  if (fromPage === 'SelectLanguage') {
    const unsubscribe = navigation.addListener('beforeRemove', (e) => {
      e.preventDefault();
      router.push('/recommended');
    });

    return unsubscribe;
  }
}, []);

代码能实现跳转，但点击返回时会先短暂显示上一页再跳转到目标页面，出现闪烁效果。同时控制台抛出错误：

The screen 'ViewTale' was removed natively but didn't get removed from JS state. This can happen if the action was prevented in a 'beforeRemove' listener, which is not fully supported in native-stack.
Consider using a 'usePreventRemove' hook with 'headerBackButtonMenuEnabled: false' to prevent users from natively going back multiple screens.

环境："expo-router": "~3.5.18"

解决方案 #

根据错误提示和Expo Router的特性，推荐使用usePreventRemove钩子替代beforeRemove监听，配合关闭原生返回菜单来解决闪烁和状态不一致问题：

1. 替换监听逻辑为usePreventRemove #

usePreventRemove是Expo Router专为阻止页面返回场景设计的钩子，比原生beforeRemove更适配native-stack：

import { usePreventRemove, router } from 'expo-router';
import { useEffect } from 'react';

export default function ViewTaleScreen() {
  const [preventRemove, allowRemove] = usePreventRemove();

  useEffect(() => {
    if (fromPage === 'SelectLanguage') {
      // 启用阻止原生返回
      preventRemove();
    } else {
      // 其他场景允许正常返回
      allowRemove();
    }
  }, [fromPage, preventRemove, allowRemove]);

  // 自定义返回逻辑
  const handleBackPress = () => {
    if (fromPage === 'SelectLanguage') {
      // 替换当前页面栈，直接跳转到目标页
      router.replace('/recommended');
    } else {
      router.back();
    }
  };

  return (
    // 页面内容
    // 若使用自定义头部，需将原生返回按钮替换为handleBackPress
  );
}

2. 关闭原生返回菜单 #

在对应页面的布局文件（如app/ViewTale/_layout.tsx）中配置headerBackButtonMenuEnabled: false，避免用户通过长按返回按钮触发原生返回：

import { Stack } from 'expo-router';

export default function ViewTaleLayout() {
  return (
    <Stack.Screen
      name="index"
      options={{
        headerBackButtonMenuEnabled: false,
      }}
    />
  );
}

3. 使用router.replace替代push #

用router.replace('/recommended')代替push，直接替换当前页面在导航栈中的位置，避免栈中残留多余页面，同时消除跳转时的闪烁。

原理说明 #

• usePreventRemove在native层面阻止页面被移除，避免原生栈与JS栈状态不一致，从根源解决页面闪烁问题。
• 关闭headerBackButtonMenuEnabled防止用户绕过自定义返回逻辑。
• replace操作直接修改导航栈，确保跳转后无法返回原页面，同时让跳转行为更直接。

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