Question

在ReactJS中successful login之后如何重定向到主页？而且我还想在用户输入错误的凭据时显示error message。
我尝试了以下类似操作，但是每当用户点击其正确凭据时，它都不会重定向到homepage。并且当用户输入错误的凭据时也不会显示login failed提示。

如果有人可以帮助我解决我想解决的问题，那将是很好的。

./ src / Login.js

import React, {Component} from "react";
import {Form} from 'antd';


export default class App  extends Component{


  constructor(props) {
        super(props);
        this.state ={
            username: "",
            password: "",
        }
        this.onFormSubmit = this.onFormSubmit.bind(this)
    }

    onFormSubmit(values){
      console.log(values);

      const formData = new FormData();
      formData.append("username", values.username);
      formData.append("password", values.password);

        const options = {
            method: 'POST',
            body: formData
        };

       fetch('http://localhost:8000/api/login', options).then(() => {
          this.props.history.push('/home')
        }).catch((error) => {
        alert('Login Failed!')
        })


    };


 render(){
    return(

      <div>
                            <Form onFinish={this.onFormSubmit}>
                                <div class="col-md-12 form-group p_star">
                                    <Form.Item name="username">
                                      <input type="text" class="form-control" placeholder="Username"/>
                                    </Form.Item>
                                </div>
                                <div class="col-md-12 form-group p_star">
                                  <Form.Item name="password">
                                    <input type="password" class="form-control"
                                        placeholder="Password"/>
                                   </Form.Item>
                                </div>
                                <div class="col-md-12 form-group">
                                    <button type="submit" value="submit" class="btn_3">
                                        log in
                                    </button>
                                </div>
                            </Form>

     </div>

Answer 1

在ReactJS中成功登录后如何重定向到首页？

像您在示例中所做的那样推动历史发展。

，我也想在用户输入错误的凭据时显示错误消息。

有一个不错的可自定义的库，名为react-toastify。
如果要执行自己的自定义错误消息弹出窗口，请创建一个父组件，该组件在ex的名为toggleError的函数时显示弹出窗口。被称为。

在ReactJS中成功登录后如何重定向到页面？

1 个答案: