react js create-react-useHistory中的“未定义react”

Question

我试图建立一个简单的密码保护的网页与硬编码的密码和随机生成的令牌，但是我得到了多个错误，最突出的是"userHistory“没有定义，有其他错误的地区主机，但我打算解决他们，因为我是新的反应，这里有人愿意帮助吗？请查看下面我的代码

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

你需要import { useHistory } from 'react-router-dom';