REACT - Unhandled Rejection (Error): Invalid hook call

So i am trying to use the useHistory of react-router-dom package using the below code.

function AdminLogin() {        const LoginAct = async () => {              const requestOptions = {              method: 'POST',              headers: { 'Content-Type': 'application/json' },              body: JSON.stringify({ password: hash })          };          await fetch('/post/admin/login', requestOptions).then(HandleResponse);      }            const HandleResponse = async (response) => {          return response.text()              .then(text => {              if (response.ok) {                  var data = text && JSON.parse(text);                  data = data[0];                  if (data != null) {                      LoginRoute();                  }              }          })      }        function LoginRoute() {          const history = useHistory();           history.push('/student/app');      }        return (              // View here including button that calls LoginAct when clicked          );    }    export default AdminLogin;    

However I am facing this error from const history = useHistory();:

I have tried to debug this with instructions in the URL shown in the error message. No luck! My react and React DOM versions:

  "peerDependencies": {      "react": "^17.0.2"    },    "dependencies": {      "react-dom": "^17.0.2",    },    

I have placed the react package to peerDependecies as instructed in some of the answers here! I have also tested other solutions found from the github issue above for ex. clearing my npm cache and updated all my packages

I have no idea what would be causing this problem other than me breaking Rules of Hooks, in which case I don't know how am I breaking them. (I also have eslint installed to enforce Rules of Hooks but it is possible that I have set it up wrong)

https://stackoverflow.com/questions/67311822/react-unhandled-rejection-error-invalid-hook-call April 29, 2021 at 02:07PM