登录后如何重定向到主页：ReactJS？

Question

ReactJS登录成功后如何跳转到homepage ？ 以及如何在用户输入错误凭据时显示error message ？
我尝试了类似下面的方法，但成功登录后它不会redirect到homepage ，并且每当用户点击错误的凭据时也不会显示login failed提示。

如果有人能弄清楚我在哪里做错了，那就太好了。

./src/Login.js

import React, {Component} from "react";
import {Form} from 'antd';
import { Redirect } from "react-router-dom";

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(() => {
        <Redirect to="/home" />
        }).catch((error) => {
      console.log(this.props.state)
      })


    };


 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

您可以使用

window.location = "/home";

或者

this.props.history.push("/home");

go 任何一个。

或者

您可以 go 通过使用反应路由器以编程方式导航

Answer 2

好吧，我建议您使用this.props.history.replace('/home') 。 因为它会阻止用户向后导航。