Next.js博客自定义返回按钮：如何阻止router.back()跳转至外部站点？

针对你遇到的「自定义返回按钮在用户从外部站点进入时跳首页，内部跳转则回来源页」的需求，以下是几个可行的实现方案：

方案1：通过路由事件自动记录内部跳转来源 #

利用Next.js的路由事件监听，在全局布局（如_app.js）中记录用户的站内跳转路径，存储在localStorage中，博客文章页读取该记录决定返回路径。

全局路由监听（_app.js） #

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

function MyApp({ Component, pageProps }) {
  const router = useRouter();

  useEffect(() => {
    const trackInternalRoutes = (url) => {
      // 仅记录站内路由（以/开头的路径）
      if (url.startsWith('/')) {
        localStorage.setItem('prevInternalPath', url);
      }
    };

    // 监听路由跳转完成事件
    router.events.on('routeChangeComplete', trackInternalRoutes);

    // 组件卸载时移除监听
    return () => router.events.off('routeChangeComplete', trackInternalRoutes);
  }, [router]);

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

export default MyApp;

博客文章页返回按钮逻辑 #

import { useRouter } from 'next/router';

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

  const handleBack = () => {
    const prevPath = localStorage.getItem('prevInternalPath');
    if (prevPath) {
      router.push(prevPath);
      localStorage.removeItem('prevInternalPath'); // 避免重复使用
    } else {
      router.push('/'); // 无内部记录则跳首页
    }
  };

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

export default BlogPost;

优缺点：无需修改现有跳转链接，自动适配所有内部路由；但依赖localStorage，若用户清除浏览器存储，会 fallback 到首页。

方案2：通过URL参数传递来源路径 #

在所有内部跳转至博客文章页的链接中，携带来源路径的URL参数，文章页读取该参数决定返回目标。

内部跳转示例（如博客列表页） #

import Link from 'next/link';

// 跳转时携带来源路径参数，需编码避免特殊字符问题
const BlogList = () => (
  <Link href={`/blog/post/1?from=${encodeURIComponent('/blog/list')}`}>
    <a>查看文章详情</a>
  </Link>
);

export default BlogList;

博客文章页处理逻辑 #

import { useRouter } from 'next/router';

const BlogPost = () => {
  const router = useRouter();
  const { from } = router.query;

  const handleBack = () => {
    // 校验来源路径为站内路由
    if (from && from.startsWith('/')) {
      router.push(decodeURIComponent(from));
    } else {
      router.push('/');
    }
  };

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

export default BlogPost;

优缺点：逻辑简单可控，不依赖存储；但需要确保所有内部跳转都携带from参数，若用户直接访问文章URL（无参数），会直接跳首页。

方案3：维护站内浏览历史栈 #

通过sessionStorage记录用户在站内的完整浏览路径，返回时按历史栈逐步回退，无内部历史则跳首页。

博客文章页实现 #

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

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

  useEffect(() => {
    const currentPath = router.asPath;
    let pathHistory = JSON.parse(sessionStorage.getItem('pathHistory')) || [];
    // 避免重复添加当前路径
    if (pathHistory.at(-1) !== currentPath) {
      pathHistory.push(currentPath);
      sessionStorage.setItem('pathHistory', JSON.stringify(pathHistory));
    }
  }, [router.asPath]);

  const handleBack = () => {
    let pathHistory = JSON.parse(sessionStorage.getItem('pathHistory')) || [];
    // 移除当前页面路径
    pathHistory.pop();
    const prevPath = pathHistory.pop();

    if (prevPath && prevPath.startsWith('/')) {
      router.push(prevPath);
      sessionStorage.setItem('pathHistory', JSON.stringify(pathHistory));
    } else {
      router.push('/');
      sessionStorage.removeItem('pathHistory'); // 清空无效历史
    }
  };

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

export default BlogPost;

优缺点：能模拟浏览器返回的站内多步回退逻辑；但需处理历史栈的重复路径问题，且依赖sessionStorage。

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