React Router Link结合按钮：POST请求后页面跳转异常问题求助

为什么当前代码不生效？ #

你的问题和axios.post()返回Promise无关，真正的问题出在两个地方：

1. 你在handleSubmit里调用了e.preventDefault()，直接阻止了外层Link组件的默认导航行为；
2. 即便去掉preventDefault，Link的导航是同步触发的，会在异步请求完成前就跳转，根本等不到请求结果，完全不符合你“无错误才跳转”的需求。

解决方法 #

放弃用Link包裹按钮的方式，改用React Router的useNavigate钩子手动控制导航时机：

1. 导入并获取导航函数

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

// 组件内部
const navigate = useNavigate();

2. 修改处理函数，请求成功后再跳转

const handleSubmit = () => {
  axios.post('http://localhost:8000/page', pageData)
    .then(res => {
      console.log(res.data);
      // 请求无错误时，手动跳转目标页面
      navigate('/next-page');
    })
    .catch(err => console.log(err));
}

3. 简化按钮JSX，去掉外层的Link

<Button onClick={handleSubmit}>Go</Button>

这样就能保证只有当POST请求成功返回时，才会触发页面跳转，完全符合你的业务需求。

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