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

Question

在 ReactJS 中成功登录后如何重定向到？以及每当用户输入错误的凭据时如何显示？我尝试了类似下面的方法，但它没有成功登录后，并且每当用户点击错误的凭据时也不会显示提示。如果有人能弄清楚我在哪里犯了错误，那就太好了。homepageerror messageredirecthomepagelogin failed./src/Login.jsimport 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"/>     </div>

Answer 1

如果组件是 来自 的直接子组件，则可以调用 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" />

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