React useNavigate在POST请求后未正常跳转问题排查

提交表单后，useNavigate('/')未按预期跳转到首页，反而回到表单的currentPage1。应用内其他模块（如登录页）的类似代码运行正常，仅此处出现异常。

路由配置 #

<BrowserRouter>
   <Routes>
     <Route path="/" exact element={<HomePage />} />
     <Route path="/form" element={<MultiPageForm />} />
   </Routes>
</BrowserRouter>

MultiPageForm 组件代码 #

import { useState } from 'react';
import axios from 'axios';
import { BASE_API_URL } from '../utils/constants';
import { useNavigate } from 'react-router-dom'

function MultiPageForm() {
  // 存储表单数据的状态
  const [email, setEmail] = useState('');
  const [text, setText] = useState('');

  // 跟踪当前表单页码的状态
  const [currentPage, setCurrentPage] = useState(1);

  const navigate = useNavigate();

  // 表单提交处理函数
  const handleSubmit = async (event) => {
    event.preventDefault();

    try {
      // 发送表单数据到后端
      await axios.post(`${BASE_API_URL}/api/form/submit-form`, { email, text });

      navigate('/')

    } catch (err) {
      console.error(err)
    }
    
    // 重置表单数据和当前页码
    setEmail('');
    setText('');
    setCurrentPage(1);
  
  };

  return (
    <form onSubmit={handleSubmit}>
      {currentPage === 1 && (
        <>
          <h1>Fill in the Form</h1>
          <button onClick={() => setCurrentPage(2)}>Start Form</button>
        </>
      )}
      {currentPage === 2 && (
        <>
          <label>
            Email:
            <input
              type="email"
              value={email}
              onChange={(event) => setEmail(event.target.value)}
            />
          </label>
          <button type="button" onClick={() => setCurrentPage(1)}>
            Previous
          </button>
          <button type="button" onClick={() => setCurrentPage(3)}>
            Next
          </button>
        </>
      )}
      {currentPage === 3 && (
        <>
          <p>Your email: {email}</p>
          <label>
            Text:
            <input
              type="text"
              value={text}
              onChange={(event) => setText(event.target.value)}
            />
          </label>
          <button type="button" onClick={() => setCurrentPage(2)}>
            Previous
          </button>
          <button type="submit">Submit</button>
        </>
      )}
    </form>
  );
}

export default MultiPageForm;

HomePage 组件代码 #

const HomePage = () => {
      // 👇️ 跳转到外部URL
      window.location.replace('https://www.google.com');
};

export default HomePage;

问题原因及修复方案 #

核心问题 #

handleSubmit函数中，调用navigate('/')后，代码仍会执行后续的setCurrentPage(1)。即使路由跳转已触发，组件状态更新会导致表单页面重新渲染，显示currentPage1的内容，直到路由跳转完成。加上HomePage直接执行外部跳转的逻辑，会造成“回到表单第一页”的视觉错觉。

修复步骤 #

在navigate('/')后立即终止函数执行，避免后续状态更新干扰路由跳转：

const handleSubmit = async (event) => {
  event.preventDefault();

  try {
    await axios.post(`${BASE_API_URL}/api/form/submit-form`, { email, text });

    navigate('/');
    return; // 终止函数，不再执行后续状态重置
  } catch (err) {
    console.error(err);
  }
  
  // 仅在请求失败时重置表单状态
  setEmail('');
  setText('');
  setCurrentPage(1);
};

额外优化 #

HomePage直接执行window.location.replace可能引发渲染错误，建议用useEffect确保组件挂载后再执行跳转：

import { useEffect } from 'react';

const HomePage = () => {
  useEffect(() => {
    window.location.replace('https://www.google.com');
  }, []);

  return null; // 返回空避免渲染异常
};

export default HomePage;

内容的提问来源于stack exchange，提问作者Ariyo Aderonmulo Muhammed