"useHistory is not defined" in react js create-react-app - reactjs

Question

I am trying to build an easy password protected page with an hardcoded password and a random token generated, However I am getting multiple errors, the most prominent one being "userHistory" is not defined, there area host of other bugs but I intend to solve them as I am new to react, anybody here care to help? Please find below my code
import React, {useState} from 'react';
function Singmein () {
const [passwordInput, setPasswordInput] = useState('');
const history = useHistory();
function handlePasswordChange(e){
setPasswordInput(e.target.value);
}
const handleLoginSubmit = (e) => {
e.preventDefault();
let hardcodedCred = {
password: 'password123'
}
if ((passwordInput == hardcodedCred.password)) {
//combination is good. Log them in.
//this token can be anything. You can use random.org to generate a random string;
const token = '123456abcdef';
sessionStorage.setItem('auth-token', token);
//go to www.website.com/todo
history.push('/signin');
} else {
//bad combination
alert('wrong email or password combination');
}
}
}
class signin extends React.Component{
render () {
return (
<div className="d-flex flex-column flex-root">
<div className="login login-4 login-signin-on d-flex flex-row-fluid" id="kt_login">
<div className="d-flex flex-center flex-row-fluid bgi-size-cover bgi-position-top bgi-no-repeat" style={{backgroundColor: 'white'}}>
<div className="login-form p-7 position-relative overflow-hidden">
<div className="d-flex flex-center">
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
</div>
<div className="card card-board" style={{backgroundColor: '#F0F1F4', width: '100%'}}>
<div className="card-body">
<div className="mb-10">
<h3 className="font-weight-bold">This website is password protected</h3>
</div>
<form className="form" autoComplete="off" id="kt_login_signin_form" onSubmit={handleLoginSubmit}>
<div className="form-group mb-5">
<label htmlFor="username">Enter Unique Password</label>
<input className="form-control h-auto form-control-solid py-4 px-8"
style={{backgroundColor: 'white'}}
type="password"
placeholder="Password"
name="password"
value={passwordInput}
onChange={handlePasswordChange} />
</div>
Enter
</form>
</div>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
</div>
</div>
</div>
</div>
);
}
};
export default signin;

Answer 1

You need to import { useHistory } from 'react-router-dom';

Answer 2

You have to import react-router-dom like this:
import {useHistory} from "react-router-dom";
So, your full code will look like this:
import React, {useState} from 'react';
import {useHistory} from "react-router-dom";
function Singmein () {
const [passwordInput, setPasswordInput] = useState('');
const history = useHistory();
...
}