如何在 reactJs 中导航

Question

我想在 ReactJS 中从一个页面导航到另一个页面我正在使用 history.push 但它给了我一个错误 TypeError: Cannot read properties of undefined (reading 'push') at Login.jsx:65 at async loginHandel (Login.jsx:51)

这是我的 App.js 代码

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Login from "./components/Login";

function App() {
  return (
    <div className="App">
      <Login />
    </div>
  );
}

export default App;

这是我的 login.jsx 函数代码

  const loginHandel = async () => {
    setLoading(true);
    const data = await axios
      .get(
        `http://116.202.231.219:8069/Restaurant/Login_Updated?Cont4=${email}&Pswd=${password}`
      )
      .then((res) => {
        //check the res if its getting the correct data or not?
        //restructure accordingly
        console.log(res);
        const persons = res;
        if (persons.status === 200) {
          //perform any thing here
          alert("It is working");
          // setUser(persons);
          setLoading(false);
          history.push("/dashboard");
          // window.open("./Dashboard.jsx")
          
        }
      })
      .catch((err) => {
        //handel your error
        console.log(err);
        alert("User email and passwoed mismatched!");
        // setLoading(false);
      });
  };

我希望在 API 成功后它应该将我导航到仪表板页面，但它没有，它会发出警报它正在工作，并且还会发出用户电子邮件和密码不匹配的警报，如果有任何一个，我将非常感激你可以帮我解决这个问题

Answer 1

你需要拥有的几样东西：

1. 基地路由器（Check here 以便更好地理解）

import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'

function App() {
  return (
    <div className="App">
      <Router>
         <Switch>
           <Route path='/' component={/* Import and use your component */} />
         </Switch>
      </Router>
    </div>
  );
}

1. 使用useHistory钩子访问history.push（这对于在<Router>下渲染的组件是正确的）

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

const YourFunctionComponent = props => {

  const history = useHistory()
  
  const letsChangeLocation = () => history.push('/wherever')
}

Answer 2

您需要在组件中导入 useHistory。然后用它来导航。

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

// in component

const history = useHistory();
history.push('/url')