ReactJS使用history.push跳转报错无法跳转至dashboard页面问题求助

1. 修复history.push未定义报错 #

你出现该报错是因为未正确配置React路由，且没有在Login组件中获取合法的导航对象，按以下步骤操作：

• 安装react-router-dom依赖：

npm install react-router-dom

• 修改App.js配置路由规则：

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Login from "./components/Login";
import Dashboard from "./components/Dashboard"; // 导入你的Dashboard组件

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Login />} />
          <Route path="/dashboard" element={<Dashboard />} />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

• Login组件替换历史导航写法：
  react-router-dom v6版本已经废弃useHistoryAPI，改用useNavigate实现跳转，在Login组件顶部添加以下代码：

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

// 组件内部声明导航实例
const navigate = useNavigate();

2. 修复请求成功同时弹出两个提示的问题 #

出现该问题的核心原因是你混用了async/await和.then/.catch写法，history.push执行时因为history是undefined会抛出异常，该异常会被后续的catch块捕获，导致先弹出成功提示后触发错误提示，同时你注释了catch块中的setLoading(false)会导致加载状态异常。
修正后的loginHandel函数代码如下：

const loginHandel = async () => {
  setLoading(true);
  try {
    const res = await axios.get(
      `http://116.202.231.219:8069/Restaurant/Login_Updated?Cont4=${encodeURIComponent(email)}&Pswd=${encodeURIComponent(password)}`
    );
    console.log(res);
    if (res.status === 200) {
      alert("It is working");
      setLoading(false);
      navigate("/dashboard");
    }
  } catch (err) {
    console.log(err);
    alert("User email and password mismatched!");
    setLoading(false);
  }
};

注意：示例中添加了encodeURIComponent处理请求参数，避免特殊字符导致请求异常，建议后续将登录请求改为POST方式加密传输密码，不要明文放在GET请求URL中。

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