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';

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

1 个答案: