Question

在ReactJS中成功登录后如何重定向到homepage？以及当用户输入错误的凭证时如何显示error message？
我尝试了以下类似操作，但是成功登录后，它没有redirect到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

如果该组件是a的直接子代，则可以调用this.props.history.push（'/ url'）; 如果没有，则可以这样导出组件：

import {withRouter} from 'react-router-dom';
....
export default withRouter(ComponentName);

然后您可以调用this.props.history.push（'/ url'）;

要显示错误，您需要将错误推送到状态并在render方法中执行此操作：

{this.state.errors !== [] && (
  {this.state.errors.map(error => (
    {/*Display the error*/}
  ))}
)}

Answer 2

假设您使用react-router-dom，则可以使用

<Redirect to="/somewhere/else" />

请确保设置与您提供给重定向组件的路径相匹配的路由

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

2 个答案: