Next.js 自定义浏览器返回按钮：单路由下阻止关闭并切换组件

问题场景 #

仅配置单个路由时，点击浏览器返回按钮会直接关闭浏览器，无法触发自定义函数控制组件切换。尝试绑定popstate事件但未生效，原代码如下：

export default function App({ Component, pageProps }: AppProps) {
  const [queryClient] = React.useState(() => new QueryClient());
  const router = useRouter();

  useEffect(() => {
    window.addEventListener("popstate", handleBackButtonPress);
    return () => {
      window.removeEventListener("popstate", handleBackButtonPress);
    };
  }, []);

  const handleBackButtonPress = (event: any) => {
    event.preventDefault();
    console.log("hiiiii back button pressed");
  };

  return (
    <SessionProvider session={pageProps.session}>
        <Component {...pageProps} />
    </SessionProvider>
  );
}

问题原因 #

popstate事件仅在浏览器历史栈存在至少两条记录且历史栈发生变化时触发。单路由场景下，初始历史栈只有当前页面一条记录，点击返回时浏览器直接退出，不会触发事件。此外，原代码中handleBackButtonPress函数引用不稳定，可能导致解绑失效。

解决步骤 #

1. 手动填充历史栈：组件挂载时添加一条与当前页面一致的历史记录，让历史栈存在两条记录，确保点击返回时触发popstate。
2. 稳定函数引用：用useCallback包裹处理函数，保证绑定和解绑的是同一个函数，避免监听失效。

修改后的代码 #

import { useEffect, useCallback } from 'react';
import { AppProps } from 'next/app';
import { SessionProvider } from 'next-auth/react';
import { useQueryClient } from '@tanstack/react-query';

export default function App({ Component, pageProps }: AppProps) {
  const queryClient = useQueryClient();
  const router = useRouter();

  // 用useCallback稳定函数引用
  const handleBackButtonPress = useCallback((event: PopStateEvent) => {
    event.preventDefault();
    console.log("返回按钮被点击");
    // 在这里编写你的组件切换逻辑，比如更新状态控制组件显示
    // 示例：setCurrentComponent('previous');
  }, []);

  useEffect(() => {
    // 初始化时添加一条历史记录，确保历史栈有可返回项
    window.history.pushState({ isInitial: true }, '', window.location.href);
    
    window.addEventListener("popstate", handleBackButtonPress);
    
    // 组件卸载时移除监听
    return () => {
      window.removeEventListener("popstate", handleBackButtonPress);
    };
  }, [handleBackButtonPress]); // 依赖稳定后的函数

  return (
    <SessionProvider session={pageProps.session}>
      <Component {...pageProps} />
    </SessionProvider>
  );
}

额外说明 #

• 如果处理完自定义逻辑后不需要保留额外的历史记录，可以在handleBackButtonPress中调用window.history.replaceState更新历史栈，避免历史栈冗余。
• 确保自定义逻辑执行后，根据需求调整历史栈状态，避免出现异常的浏览器导航行为。

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