REACT - Unhandled Rejection (Error): Invalid hook call

Question

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)

Answer 1

The hook needs to be called at the top level of the component. There's also no reason to abstract the single line into an additional callback, just do the PUSH in the asynchronous handler.

function AdminLogin() {
    const history = useHistory(); // <-- here

    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) {
                    history.push('/student/app'); // <-- called here
                }
            }
        })
    }

    return (
            // View here including button that calls LoginAct when clicked
    );
}