ReactJS登录后如何重置浏览器历史栈，仅保留/dashboard页面

问题场景 #

当前历史栈：index->login->dashboard，登录后需要让历史栈仅包含/dashboard，点击后退按钮无跳转。

已尝试方法的局限 #

1. window.location.replace('/dashboard')：仅替换当前/login页面，历史栈变为index->dashboard，仍保留初始页。
2. React useNavigate() 配合replace:true：效果与上述方法一致，仅替换当前路由条目，无法清除更早的历史记录。
3. window.history.replaceState({}, undefined, '/dashboard')：仅修改URL，不会触发页面跳转，无法加载/dashboard。

可行解决方案 #

方案1：React Router v6+ 环境 #

登录成功后，先替换当前路由为Dashboard，再通过修改历史栈清空所有前置条目：

import { useNavigate } from 'react-router-dom';

const LoginPage = () => {
  const navigate = useNavigate();

  const handleLogin = async () => {
    // 执行登录逻辑，验证成功后执行以下操作
    const isAuthenticated = await yourLoginApi();

    if (isAuthenticated) {
      // 第一步：替换当前login页为dashboard，历史栈变为 index->dashboard
      navigate('/dashboard', { replace: true });

      // 第二步：修改历史栈，让dashboard成为唯一条目
      setTimeout(() => {
        // 添加一个dashboard条目到栈顶
        window.history.pushState({}, '', '/dashboard');
        // 后退到前一个dashboard，此时栈中仅保留该条目
        window.history.go(-1);
      }, 0);
    }
  };

  return <button onClick={handleLogin}>登录</button>;
};

方案2：原生JavaScript环境 #

登录成功后跳转并修改历史栈：

const handleLogin = async () => {
  const isAuthenticated = await yourLoginApi();
  
  if (isAuthenticated) {
    // 替换当前login页为dashboard，跳转页面
    window.location.replace('/dashboard');
    
    // 页面加载完成后重置历史栈
    window.addEventListener('load', () => {
      window.history.pushState({}, '', '/dashboard');
      window.history.go(-1);
    });
  }
};

原理说明 #

通过pushState添加一个重复的Dashboard条目到历史栈，再通过go(-1)后退到原Dashboard条目，此时浏览器会将更早的历史条目（如index）从栈中移除，最终历史栈仅保留一个Dashboard条目，点击后退按钮无任何跳转。

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