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

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>
                      <a href="signin" type="submit" className="btn btn-primary font-weight-bold px-9 py-4 my-3 mx-4">Enter</a>
                    </form>
                  </div>
                </div>
              <br/>
              <br/>
              <br/>
              <br/>
              <br/>
              <br/>
              <br/>
              <br/>
              <br/>
              </div>
            </div>
          </div>
        </div>
      );
    }
  };

export default signin;

Answer 1

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();
    ...
}

Answer 2

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