React中useNavigate发送POST请求后不跳转问题求助

以下是几种常见的原因和对应的解决方法：

1. 未在请求成功的异步回调中执行跳转 #

fetch/axios都是异步操作，若直接在请求后立刻调用navigate，可能跳转先执行，请求后续完成（即使数据最终存入数据库，跳转逻辑也没在正确时机触发）。必须确保在请求成功的回调里调用跳转：

正确示例（async/await写法）： #

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

const AddGame = () => {
  const navigate = useNavigate();
  const [gameData, setGameData] = useState({ name: '', genre: '' });

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const res = await fetch('/api/add-game', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(gameData)
      });
      
      if (!res.ok) throw new Error('请求异常');
      
      // 请求确认成功后再跳转
      navigate('/games');
    } catch (err) {
      console.error(err);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={gameData.name}
        onChange={(e) => setGameData({...gameData, name: e.target.value})}
        placeholder="游戏名称"
      />
      <button type="submit">添加游戏</button>
    </form>
  );
};

正确示例（.then链式写法）： #

const handleSubmit = (e) => {
  e.preventDefault();
  fetch('/api/add-game', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(gameData)
  })
  .then(res => {
    if (!res.ok) throw new Error('请求失败');
    return res.json();
  })
  .then(() => {
    // 跳转放在成功回调里
    navigate('/games');
  })
  .catch(err => console.error(err));
};

2. 表单提交未阻止默认行为 #

如果是通过表单提交触发请求，必须调用e.preventDefault()阻止浏览器默认的页面刷新行为——否则页面会重新加载，navigate的客户端跳转会被覆盖，看起来像是没跳转。

3. React Router版本不匹配 #

• 若使用React Router v5，没有useNavigate钩子，需要改用useHistory：

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

const history = useHistory();
// 请求成功后执行
history.push('/games');

• 确保项目安装的是对应版本的React Router，v6用useNavigate，v5用useHistory。

4. 路由配置错误 #

检查路由配置，确保/games路径已经正确注册到<Routes>（v6）或<Switch>（v5）中，且对应的组件能正常渲染：

// React Router v6 示例
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import GamesList from './pages/GamesList';
import AddGame from './pages/AddGame';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/add-game" element={<AddGame />} />
        <Route path="/games" element={<GamesList />} /> {/* 必须存在这条路由 */}
      </Routes>
    </BrowserRouter>
  );
}

5. 组件未被Router包裹 #

确保使用useNavigate的组件是在<BrowserRouter>（或其他Router组件）的嵌套范围内，否则useNavigate无法获取路由上下文，调用后不会生效。

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