用户登录后如何消除Chrome默认页面？Next.js路由后退问题求助

问题原因 #

当你在用户进入首页时调用router.replace('/home')，浏览器历史栈中仍保留了初始的空白页（或域名根路径）记录，导致点击后退按钮时会跳转到Chrome默认页面。

解决方案 #

方案一：客户端替换后清理历史栈

在首页组件中，完成路由替换后，通过浏览器History API替换历史栈的初始记录，确保栈中仅保留目标页面：

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

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

  useEffect(() => {
    // 仅在访问根路径时执行重定向
    if (router.asPath === '/') {
      router.replace('/home').then(() => {
        // 替换历史栈的第一条记录，消除空白页条目
        window.history.replaceState(null, '', window.location.href);
      });
    }
  }, [router]);

  return null; // 根路径无需渲染内容
}

方案二：服务器端配置重定向（推荐）

如果是固定将根路径/重定向到/home，直接在next.config.js中配置服务器端重定向，这种方式不会产生多余的历史记录：

// next.config.js
module.exports = {
  async redirects() {
    return [
      {
        source: '/',
        destination: '/home',
        permanent: true,
      },
    ];
  },
};

方案对比 #

• 方案一适合需要客户端动态判断重定向条件的场景（比如根据用户权限跳转）。
• 方案二更简洁可靠，属于服务器端操作，不会留下冗余历史记录，对SEO也更友好。

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