如何通过Expo Router检测history.back()导航行为？

你可以通过Expo Router导航上下文提供的state.action.type直接判断导航是否由浏览器历史回退/前进触发，无需额外监听popstate或手动对比路径：

import { Navigator } from 'expo-router';
import { useEffect } from 'react';

export default function AppLayout() {
  const { state } = Navigator.useContext();

  useEffect(() => {
    // 导航动作类型为POP时，说明是浏览器历史记录触发的回退/前进
    const isHistoryNavigation = state?.action?.type === 'POP';

    // 仅在非历史导航场景下滚动到顶部
    if (!isHistoryNavigation && typeof window !== 'undefined' && window.scrollTo) {
      window.scrollTo(0, 0);
    }
  }, [state]);

  return (
    <TabLayout>
      <ResponsiveNavigator />
    </TabLayout>
  );
}

原理说明 #

Expo Router的导航状态state中包含action对象，不同导航行为对应不同的动作类型：

• POP：由浏览器回退/前进按钮、history.back()/history.forward()触发的导航
• PUSH：通过router.push()或点击链接跳转（新增历史记录）触发的导航
• REPLACE：通过router.replace()触发的导航（替换当前历史记录）

通过action.type === 'POP'的判断，就能精准区分是否需要保留浏览器滚动位置，完全匹配你的需求场景。

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