Next.js中router.back()问题：实现仅返回本站页面的自定义逻辑

问题核心 #

直接调用router.back()会完全遵循浏览器的历史记录逻辑：如果用户是从外部网站直接输入网址进入你的页面，点击返回就会跳回外部站点。而document.referrer在很多场景下会为空（比如用户手动输入URL、通过书签访问时），没法作为可靠判断依据。

可行解决方案 #

方案一：维护站内页面历史栈（推荐） #

在_app.tsx（或_app.jsx）中监听路由变化，手动维护一个站内页面的历史栈，通过栈的长度判断用户是否来自站内跳转。

// pages/_app.tsx
import { AppProps } from 'next/app';
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';

function MyApp({ Component, pageProps }: AppProps) {
  const router = useRouter();
  const [internalHistory, setInternalHistory] = useState<string[]>([]);

  useEffect(() => {
    // 页面初始加载时，将当前路径加入栈
    if (internalHistory.length === 0) {
      setInternalHistory([router.asPath]);
    }

    const updateHistory = (url: string) => {
      setInternalHistory(prev => {
        // 避免重复添加同一页面
        if (prev[prev.length - 1] !== url) {
          return [...prev, url];
        }
        return prev;
      });
    };

    router.events.on('routeChangeComplete', updateHistory);
    return () => router.events.off('routeChangeComplete', updateHistory);
  }, [router, internalHistory.length]);

  // 将历史栈传递给子组件
  pageProps.internalHistory = internalHistory;

  return <Component {...pageProps} />;
}

export default MyApp;

在需要返回按钮的组件中，自定义返回逻辑：

// 示例：pages/posts/[id].tsx
import { useRouter } from 'next/router';
import { useCallback } from 'react';

export default function PostPage({ internalHistory }) {
  const router = useRouter();

  const handleBack = useCallback(() => {
    // 栈长度大于1，说明是站内跳转进入，返回上一页
    if (internalHistory.length > 1) {
      router.back();
    } else {
      // 否则直接跳转到首页
      router.push('/');
    }
  }, [router, internalHistory.length]);

  return (
    <button onClick={handleBack}>返回</button>
  );
}

方案二：利用window.history.length判断（简易版） #

适合不需要精确页面栈的场景，通过浏览器历史记录的长度快速判断：

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

export default function SomePage() {
  const router = useRouter();

  const handleBack = useCallback(() => {
    // 初始进入页面时，history.length通常为1或2（取决于浏览器）
    // 阈值可根据实际情况调整
    if (window.history.length <= 2) {
      router.push('/');
    } else {
      router.back();
    }
  }, [router]);

  return (
    <button onClick={handleBack}>返回</button>
  );
}

注意：该方案有局限性——如果用户在站内多次跳转后刷新页面，history.length会重置，可能导致判断不准确。

关键提醒 #

• 彻底放弃依赖document.referrer：浏览器隐私策略限制下，它在手动输入URL、书签访问、HTTPS转HTTP等场景下都会为空，完全不可靠。
• 方案一的页面栈可进一步优化：比如处理回退时的栈更新逻辑，或者限制栈的最大长度，避免内存占用过高。

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