如何在react-router-dom v6中处理浏览器前进后退并跳转首页

直接通过监听浏览器的popstate事件实现，这是浏览器原生事件，完全兼容react-router-dom v6，具体实现步骤如下：

1. 在根路由组件（如App.jsx）中导入所需钩子：

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

2. 添加事件监听与跳转逻辑：

function App() {
  const navigate = useNavigate();

  useEffect(() => {
    // 处理浏览器前进/后退事件
    const handlePopState = () => {
      // 强制跳转到首页，replace: true避免新增历史记录
      navigate('/', { replace: true });
    };

    // 绑定监听
    window.addEventListener('popstate', handlePopState);

    // 组件卸载时清理监听
    return () => {
      window.removeEventListener('popstate', handlePopState);
    };
  }, [navigate]);

  // 你的路由配置
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      {/* 其他业务路由 */}
    </Routes>
  );
}

关键说明 #

• popstate事件仅在用户点击浏览器前进/后退按钮、或调用history.back()/history.forward()时触发，不会影响react-router内部的Link或navigate跳转。
• 使用replace: true参数是为了避免将首页跳转操作添加到浏览器历史栈，防止用户再次点击后退按钮重复触发跳转逻辑。
• 若需结合会话状态（比如仅在用户登录时拦截），可在handlePopState中添加判断：

// 假设你有获取会话状态的hook
const { isLoggedIn } = useAuth();

const handlePopState = () => {
  if (isLoggedIn) {
    navigate('/', { replace: true });
  }
};

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