React Router Link嵌套带onClick的按钮时跳转失效求助

问题出在你用Link包裹按钮的方式：Link的跳转是点击时立即触发的，和按钮的onClick事件执行顺序冲突，导致计算完成前跳转已经触发（或事件处理干扰了Link的默认行为）。正确的做法是放弃Link的声明式跳转，改用编程式导航，等计算逻辑完成后手动触发页面跳转。

具体实现步骤 #

1. 导入React Router的useNavigate钩子
2. 在组件内初始化导航函数
3. 移除Link包裹，改用普通按钮（或绑定表单的onSubmit事件）
4. 在计算逻辑完成后，调用导航函数跳转到目标页面

示例代码 #

错误写法（跳转失效）

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

function CalculatorForm() {
  const handleSubmit = () => {
    // 你的计算逻辑
    console.log("执行计算");
  };

  return (
    <form>
      {/* 表单输入元素 */}
      <Link to="/results">
        <button onClick={handleSubmit}>提交计算</button>
      </Link>
    </form>
  );
}

修正写法（先计算再跳转）

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

function CalculatorForm() {
  // 初始化导航函数
  const navigate = useNavigate();

  const handleSubmit = () => {
    // 1. 获取表单输入数据
    const inputValue = document.getElementById("calc-input").value;
    
    // 2. 执行计算逻辑（同步/异步都支持）
    const calculationResult = parseInt(inputValue) * 3; // 示例计算
    
    // 可选：将计算结果存储，供结果页面读取（比如localStorage或context）
    localStorage.setItem("calcResult", calculationResult);
    
    // 3. 计算完成后，手动跳转
    navigate("/results");
  };

  return (
    <form>
      <input id="calc-input" type="number" placeholder="输入数字" />
      {/* 用普通按钮绑定点击事件 */}
      <button type="button" onClick={handleSubmit}>提交计算</button>
    </form>
  );
}

进阶：绑定表单onSubmit事件（推荐） #

如果是表单，更推荐绑定form的onSubmit事件，既支持点击按钮提交，也支持回车提交：

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

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

  const handleFormSubmit = (e) => {
    // 阻止表单默认的刷新页面行为
    e.preventDefault();
    
    // 通过FormData获取表单数据
    const formData = new FormData(e.target);
    const inputValue = formData.get("calc-input");
    
    // 执行计算
    const result = parseInt(inputValue) * 3;
    localStorage.setItem("calcResult", result);
    
    // 跳转
    navigate("/results");
  };

  return (
    <form onSubmit={handleFormSubmit}>
      <input name="calc-input" type="number" placeholder="输入数字" />
      <button type="submit">提交计算</button>
    </form>
  );
}

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