React开发：问题组件中阻止用户未选答案前离开页面的问题

看来你遇到了在用户没选答案前阻止页面跳转的问题，我来帮你梳理下可行的解决思路，顺便分析下你之前方法失效的可能原因～

先说说你之前方法失效的大概率原因 #

你尝试给链接加带条件的onClick事件，只有当score === 'selected'时才调用e.preventDefault()，但没生效？大概率是状态判断的时机不对：比如React的状态更新是异步的，当用户点击链接时，score可能还没更新到预期值，导致条件不成立，e.preventDefault()没被触发；或者你绑定事件的方式有问题，比如事件被其他逻辑覆盖了。

推荐两种靠谱的解决方案 #

方案1：监听页面卸载/外部跳转事件（beforeunload） #

这个方法适用于用户关闭浏览器标签、刷新页面，或者跳转到外部网站的场景。我们可以在组件里绑定beforeunload事件，根据score状态判断是否阻止：

import { useEffect, useState } from 'react';

function Question() {
  const [score, setScore] = useState(null); // 初始状态为未选择

  useEffect(() => {
    const handleBeforeUnload = (e) => {
      // 未选择答案时阻止页面跳转
      if (score !== 'selected') {
        e.preventDefault();
        // 兼容部分浏览器，需要设置returnValue
        e.returnValue = '';
      }
    };

    // 绑定事件
    window.addEventListener('beforeunload', handleBeforeUnload);

    // 组件卸载时记得移除监听，避免内存泄漏
    return () => {
      window.removeEventListener('beforeunload', handleBeforeUnload);
    };
  }, [score]); // 依赖score，状态变化时重新绑定监听

  // 选择答案后更新状态
  const handleAnswerSelect = () => {
    setScore('selected');
  };

  return (
    <div>
      <h3>你的问题内容</h3>
      <button onClick={handleAnswerSelect}>选择这个答案</button>
      <a href="https://external-site.com">跳转到外部网站</a>
    </div>
  );
}

方案2：拦截单页应用的内部路由跳转 #

如果是React Router这类单页路由的内部跳转，beforeunload不会触发，这时候可以用路由库自带的拦截能力：

用React Router v6的usePrompt（最简单）

import { usePrompt } from 'react-router-dom';
import { useState } from 'react';
import { Link } from 'react-router-dom';

function Question() {
  const [score, setScore] = useState(null);

  // 当未选择答案时，弹出确认提示
  usePrompt(
    score !== 'selected' ? '你还没选择答案，确定要离开吗？' : false
  );

  const handleAnswerSelect = () => {
    setScore('selected');
  };

  return (
    <div>
      <h3>你的问题内容</h3>
      <button onClick={handleAnswerSelect}>选择答案</button>
      <Link to="/next-page">跳转到下一页</Link>
    </div>
  );
}

手动拦截路由跳转（更灵活）

如果需要自定义确认逻辑，比如用自己的弹窗而不是浏览器默认提示，可以用navigate.block：

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

function Question() {
  const [score, setScore] = useState(null);
  const navigate = useNavigate();

  useEffect(() => {
    // 拦截路由跳转
    const unblock = navigate.block((tx) => {
      if (score !== 'selected') {
        // 自定义确认弹窗
        if (window.confirm('你还没选答案哦，确定要走吗？')) {
          tx.retry(); // 用户确认后允许跳转
        }
      } else {
        tx.retry(); // 已选答案，直接放行
      }
    });

    // 组件卸载时取消拦截
    return unblock;
  }, [score, navigate]);

  const handleAnswerSelect = () => {
    setScore('selected');
  };

  return (
    <div>
      <h3>你的问题内容</h3>
      <button onClick={handleAnswerSelect}>选择答案</button>
      <Link to="/next-page">跳转到下一页</Link>
    </div>
  );
}

额外提示 #

如果你还是想用给链接加onClick的方式，一定要确保状态判断是实时的，比如：

// 正确的写法：直接判断当前状态，而不是依赖异步更新
const handleLinkClick = (e) => {
  if (score !== 'selected') {
    e.preventDefault();
    alert('请先选择答案！');
  }
};

// 然后给链接绑定这个事件
<a href="/next-page" onClick={handleLinkClick}>跳转到下一页</a>

这种方式要注意：如果是React Router的Link组件，它的跳转逻辑是基于onClick的，所以直接阻止默认行为是有效的；但如果是原生a标签跳转到外部网站，这个方法也能生效，前提是score的状态是正确的。

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