React Router v6中useBlocker无法拦截首页面返回导航的问题咨询

这是预期行为吗？ #

是预期行为。React Router v6 的 useBlocker 仅负责拦截应用内部的路由导航跳转，比如从首页跳转到其他页面后再返回首页的操作。但当你处于应用的初始路由（首页面）时，浏览器的历史栈中只有当前SPA页面的记录，此时触发“返回”操作本质是要跳转到浏览器历史栈中的上一条外部记录（比如打开SPA前的页面），这种浏览器级别的历史栈跳转不在 useBlocker 的拦截范围内。

解决办法 #

方法1：监听浏览器 popstate 事件直接拦截 #

通过监听浏览器原生的 popstate 事件，直接拦截返回操作，同时通过 history.pushState 抵消返回行为，确保停留在首页面。

import { useEffect, useLocation } from 'react';

function HomePage() {
  const location = useLocation();

  useEffect(() => {
    const handlePopState = () => {
      // 自定义拦截逻辑，比如判断表单是否有未保存内容
      if (!window.confirm('确定要离开当前页面吗？')) {
        // 重新push当前路由到历史栈，抵消返回操作
        history.pushState(null, null, location.pathname);
      }
    };

    // 初始化时push一次，确保历史栈有当前记录，避免直接回退到外部页面
    history.pushState(null, null, location.pathname);
    // 添加popstate监听
    window.addEventListener('popstate', handlePopState);

    // 组件卸载时移除监听，防止内存泄漏
    return () => {
      window.removeEventListener('popstate', handlePopState);
    };
  }, [location.pathname]);

  return (
    <div>
      <h1>首页</h1>
      <form>
        {/* 你的表单内容 */}
      </form>
    </div>
  );
}

export default HomePage;

方法2：结合 useBlocker 和 popstate 实现全场景拦截 #

如果需要同时拦截应用内部导航和浏览器外部返回，可以将两种方式结合：

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

function HomePage() {
  const location = useLocation();
  const blocker = useBlocker(() => false); // 先拦截所有内部导航

  // 处理浏览器外部返回
  useEffect(() => {
    const handlePopState = () => {
      if (!window.confirm('确定要离开当前页面吗？')) {
        history.pushState(null, null, location.pathname);
      }
    };

    history.pushState(null, null, location.pathname);
    window.addEventListener('popstate', handlePopState);

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

  // 处理应用内部导航拦截
  useEffect(() => {
    if (blocker.state === 'blocked') {
      blocker.reset();
      if (window.confirm('确定要离开当前页面吗？')) {
        blocker.proceed();
      }
    }
  }, [blocker]);

  return (
    <div>
      <h1>首页</h1>
      <form>
        {/* 你的表单内容 */}
      </form>
    </div>
  );
}

注意事项 #

• 调用 history.pushState 时要确保路径正确，避免破坏应用路由状态；
• 组件卸载时必须移除 popstate 监听，防止内存泄漏和影响其他页面；
• 可以根据实际需求调整拦截逻辑，比如仅在表单有未保存内容时才弹出确认框，而非始终拦截。

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