react-router-dom v6中useNavigate无法跳转页面问题求助

1. 修正useNavigate的调用方式（核心问题） #

React Router v6中，useNavigate返回的是一个直接调用的函数，不再像v5的useHistory那样提供.push()方法。你代码里的navigate.push('/')是错误写法，需修改为：

navigate('/');

2. 确认组件处于Router上下文内 #

useNavigate必须在Router的上下文环境中才能生效，确保你的Login组件被BrowserRouter（或HashRouter等Router组件）包裹。例如在App根组件中：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Login from './path/to/Login';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/login" element={<Login />} />
        {/* 其他路由配置 */}
      </Routes>
    </Router>
  );
}

3. 可选：配合sweetalert回调优化跳转时机 #

sweetalert弹窗是异步的，若想等用户确认弹窗后再执行跳转，可利用其回调函数：

swal("Success", res.data.message, "success").then(() => {
  navigate('/');
});

4. 验证登录成功分支是否被触发 #

在if(res.data.status === 200)分支内添加日志，确认代码是否真的进入了跳转逻辑：

if(res.data.status === 200){
  console.log("登录成功，进入跳转流程"); // 验证分支是否生效
  localStorage.setItem('auth_token', res.data.token);
  localStorage.setItem('auth_name', res.data.username);
  swal("Success",res.data.message,"success");
  navigate('/');
}

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