时间戳

首页 > 解决方案 > 尝试重定向时出现错误意外使用历史记录？

reactjs - 尝试重定向时出现错误意外使用历史记录？

问题描述

我正在尝试构建一个登录身份验证系统，当用户使用护照身份验证模块介绍他的所有详细信息时，用户会被重定向到该模块的主页history。history但是在这样做之后，当我查看stackoverflow中的其他一些解决方案并且它们似乎都使它以这种方式工作时，它给了mme一个意外使用的错误。

import React, {useState} from 'react'
import './login.css'
import axios from 'axios'
import { useHistory } from "react-router-dom";


function Login() {
    const [username, setUsername] = useState("")
    const [password, setPassword] = useState("")
    const [data, setData] = useState(null)

    const onChangeUsername = (e) => {
      setUsername(e.target.value)
    }

    const onChangePassword = (e) => {
      setPassword(e.target.value)
    }

    const onSubmit = (e) => {
      e.preventDefault()

      const users = {
        username: username,
        password: password
      }
      axios.post('http://localhost:4000/users/login', users)
      .then(res => console.log(res.data))
    }

    const loginUser = () => {
      axios.get("http://localhost:4000/users/user", {
        withCredentials: true
      }).then(res => {
        setData(res)
        if(res.status === 200) return history.push("/home")
      })
    }
    console.log(data)

    return (
        <div>
          <img src="https://www.freepnglogos.com/uploads/twitter-logo-png/twitter-logo-vector-png-clipart-1.png" className="twitterlogo____image"/>
          <h1 className="login_____headertext">Log in to Twitter</h1>
          <div className="placeholder_____global">
          <form onSubmit={onSubmit}>
            <input className="placeholder____div" placeholder="Phone, email or username" onChange={onChangeUsername}/>
            <div>
              <input className="placeholder____div" placeholder="Password" type="password" onChange={onChangePassword}/>
            </div>
            <div>
              <button className="twitter___loginbuttonpage" onClick={loginUser}>Log in</button>
            </div>
            </form>
            <div className="forgetPassword_____div">
              <p>Forgot password?</p>
              <p>·</p>
              <p>Sign up for Twitter</p>
            </div>
          </div>
        </div>
    )
}

export default Login

标签： reactjs

解决方案

看起来您正在导入 useHistory 挂钩，但没有对其进行初始化。

在组件状态下方添加以下内容：

const history = useHistory()

推荐阅读