Next.js实现浏览器返回按钮跳转至首页"/"路由方案

Next.js有两种路由体系，下面分别给出对应实现方案：

Pages Router（Next.js 12及更早版本） #

在需要修改返回行为的页面组件里，通过监听浏览器popstate事件，结合useRouter钩子覆盖默认返回逻辑：

import { useEffect } from 'react';
import { useRouter } from 'next/router';

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

  useEffect(() => {
    const handleBackButton = (event) => {
      // 阻止浏览器默认的返回行为
      event.preventDefault();
      // 强制跳转到首页
      router.push('/');
    };

    // 绑定返回事件监听
    window.addEventListener('popstate', handleBackButton);

    // 组件卸载时移除监听，避免内存泄漏
    return () => {
      window.removeEventListener('popstate', handleBackButton);
    };
  }, [router]);

  return <div>当前页面：点击返回将跳转首页</div>;
};

export default TargetPage;

要留意：

• 该逻辑仅对当前页面生效，不会影响其他路由的返回行为
• 如果需要限制仅在特定路径触发，可通过router.pathname判断当前路由后再执行跳转

App Router（Next.js 13及以上版本） #

App Router下需先声明'use client'启用客户端交互，再用next/navigation提供的useRouter实现：

'use client'; // 必须添加该指令才能使用客户端钩子

import { useEffect } from 'react';
import { useRouter, usePathname } from 'next/navigation';

const TargetPage = () => {
  const router = useRouter();
  const currentPath = usePathname();

  useEffect(() => {
    const handleBackButton = (event) => {
      // 仅在当前是目标路径时修改返回行为
      if (currentPath === '/target-page') {
        event.preventDefault();
        router.push('/');
      }
    };

    window.addEventListener('popstate', handleBackButton);

    return () => {
      window.removeEventListener('popstate', handleBackButton);
    };
  }, [router, currentPath]);

  return <div>当前页面：点击返回将跳转首页</div>;
};

export default TargetPage;

额外说明：

• 若不需要路径判断，可直接移除if条件，简化逻辑
• 该方案同样只会影响当前页面的返回行为，不会全局修改浏览器返回逻辑

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