如何使用React的useNavigate钩子阻止页面回退导航？

你当前使用的navigate("/", {replace: true})属于直接替换历史栈的取巧实现，会破坏正常的浏览历史顺序，只适合强制跳转的特殊场景，不适合作为通用拦截方案。根据你使用的React Router版本，可选择以下正式方案：

React Router v6.4+ 首选方案：useBlocker 官方拦截钩子 #

v6.4版本推出数据路由模式后，官方提供了专门的导航拦截APIuseBlocker，可以自动拦截所有导航行为（包括浏览器回退/前进按钮、useNavigate触发的代码跳转、<Link>组件点击跳转），不需要手动操作历史栈，是目前最规范的实现方式。

注意：该API仅支持通过createBrowserRouter/createHashRouter创建的数据路由场景，旧版组件式路由（直接渲染<BrowserRouter>包裹路由表）不支持。

示例代码：

import { useBlocker } from 'react-router-dom';
import { useState } from 'react';

function EditPage() {
  // 拦截开关：比如表单存在未保存修改时设为true
  const [hasUnsavedContent, setHasUnsavedContent] = useState(true);

  useBlocker(() => {
    // 这里写拦截后的逻辑，比如弹确认框
    return window.confirm('当前页面有未保存的修改，确定要离开吗？');
  }, hasUnsavedContent); // 第二个参数为拦截生效条件，false时不拦截任何导航

  return (
    <div>
      {/* 页面内容，比如表单 */}
      <button onClick={() => setHasUnsavedContent(false)}>保存</button>
    </div>
  )
}

该方案的优势是不会污染历史栈，拦截逻辑统一管控，不会出现回退逻辑错乱的问题。

兼容旧版组件式路由的实现方案 #

如果你还在使用v6全版本兼容的组件式路由，没有升级到数据路由模式，可以通过监听浏览器原生popstate事件，搭配useNavigate实现拦截，核心逻辑是通过手动维护历史栈保证回退事件能被正确捕获：

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

function EditPage() {
  const navigate = useNavigate();
  const location = useLocation();
  const [hasUnsavedContent, setHasUnsavedContent] = useState(true);

  useEffect(() => {
    // 进入页面时追加一条当前页的历史记录，保证回退操作会触发popstate事件
    window.history.pushState(null, document.title, location.pathname);

    const handlePopState = () => {
      if (hasUnsavedContent) {
        const confirmLeave = window.confirm('当前页面有未保存的修改，确定要离开吗？');
        if (!confirmLeave) {
          // 用户取消离开，重新追加当前页历史记录，保持留在当前页
          window.history.pushState(null, document.title, location.pathname);
          return;
        }
        // 用户确认离开，执行回退
        navigate(-1);
      }
    };

    window.addEventListener('popstate', handlePopState);
    return () => window.removeEventListener('popstate', handlePopState);
  }, [hasUnsavedContent, location.pathname, navigate]);

  return <div>表单编辑页</div>
}

使用注意事项 #

• 导航拦截仅建议用于存在未保存输入、进行中交易等用户操作可能丢失的场景，不要滥用拦截影响正常浏览体验
• 拦截触发的提示尽量和项目UI风格保持一致，避免出现突兀的交互
• 不需要拦截时一定要及时关闭拦截开关，避免出现无法正常跳转的bug

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