React中使用Fetch发送请求时如何阻止页面重定向？

核心问题分析 #

你遇到的页面跳转并非fetch的redirect参数导致，而是表单的默认提交行为未被彻底阻断，或是冗余的表单属性引发了边缘场景下的跳转。以下是具体解决方案：

解决方案步骤 #

1. 移除表单的action和method属性
   既然你已经通过fetch手动处理提交逻辑，这两个浏览器默认表单提交的配置完全可以移除，彻底避免浏览器触发默认跳转行为。

2. 确保e.preventDefault()优先执行
   将阻止默认行为的代码放在处理函数最开头，避免因后续代码报错导致该方法未被调用。

3. 保留redirect: 'manual'并处理重定向响应
   该参数会让fetch不自动跟随重定向，直接返回3xx状态码的响应，你可以手动获取重定向地址但不会触发页面跳转。

修改后的代码示例 #

表单代码

<form onSubmit={handleSubmit} ref={formElement}>
  <!-- 表单输入项 -->
</form>

提交处理函数

const formElement = useRef(null);

const handleSubmit = (e) => {
  e.preventDefault(); // 优先阻止默认行为

  try {
    const data = Array.from(formElement.current.elements)
      .filter((input) => input.name)
      .reduce((obj, input) => ({ ...obj, [input.name]: input.value }), {});

    fetch(finalFormEndpoint, {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
      redirect: 'manual',
      body: JSON.stringify(data)
    })
    .then((response) => {
      console.log(response.status);
      // 手动处理重定向信息（可选）
      if (response.status >= 300 && response.status < 400) {
        const redirectUrl = response.headers.get('Location');
        console.log('API返回重定向地址:', redirectUrl);
        // 此处可根据业务需求做提示或其他操作，不会触发页面跳转
      }
    })
    .catch((error) => {
      console.error('请求出错:', error);
    });
  } catch (err) {
    console.error('处理表单数据出错:', err);
  }
};

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