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

在ReactJS中成功登录后如何重定向到主页？而且，每当用户输入错误的凭证时，我想显示

错误消息。

我尝试了下面的方法，但每当用户点击正确的凭证时，它都不会重定向到
主页。当用户点击错误的凭证时，也不会显示登录失败的提示。


如果有人能帮我解决我要解决的问题，那就太好了


/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>


import React，{Component}来自“React”；
从“antd”导入{Form}；
导出默认类应用程序扩展组件{
建造师（道具）{
超级（道具）；
这个州={
用户名：“”，
密码：“”，
}
this.onFormSubmit=this.onFormSubmit.bind（this）
}
onFormSubmit（值）{
console.log（值）；
const formData=new formData（）；
formData.append（“用户名”，values.username）；
formData.append（“密码”，value.password）；
常量选项={
方法：“POST”，
正文：formData
};
取（'http://localhost:8000/api/login，选项）。然后（（）=>{
this.props.history.push（“/home”）
}).catch（（错误）=>{
警报（'登录失败！'）
})
};
render（）{
返回(
登录
成功登录ReactJS后如何重定向到主页


像您在示例中所做的那样推动历史应该是可行的

而且我想在用户输入错误凭证时显示错误消息


有一个很好的自定义库，名为
如果您想创建自己的自定义错误消息弹出窗口，请创建一个父组件，在调用名为toggleError for ex.的函数时显示弹出窗口
Fetch不会在错误HTML状态（）时返回被拒绝的承诺，而不是实际的网络错误和中止的请求。您需要检查响应代码以确定正确的操作过程。对于这个特定的问题，我认为您也需要发布API路由函数，因为catch处理fetch API调用的方式是，如果您的服务器返回的状态代码不在de>200、201、202
等等，然后捕获将捕获该特定错误。请提供适当的后端代码，我们可以从那里开始。谢谢。您在控制台中是否收到错误或什么都没有？我收到的错误是成功登录后未重定向到
主页
。@ZainZafarso我必须使用
这个。props.BrowserHistory.push（/home）
？@4UmNinja
推到历史
在我的情况下可以工作…我应该怎么做？如果你使用react router v4，你需要用函数“withRouter”包装你的组件。在你的情况下，它将是->导出默认withRouter（应用程序）；也从“react-router-dom”导入它您是否使用远程桌面应用程序，如teamviewer或anydesk？如果您能帮助我，希望这是最好的方法…您是否正确设置了react路由器。您是否在应用程序的开始处有路由器组件？同时确保您的路由配置正确，否则您将被重定向。