Json 表单提交时无法重定向到其他页面-ReactJS

我试图找出为什么我的表单在接受用户名和密码后无法重定向用户。表单从以下API/json接收它的值：…因此我有一个函数，它包含一个if语句，用于检查用户名和密码，但是当我单击submit按钮时，页面会重新加载。目前，API/json中的密码设置为null

我的问题：由于API/json中的密码为空，密码字段应该接受任何值吗

代码：

import React, { Component } from 'react';
import {Redirect} from 'react-router-dom';
import './Login.css';

class Login extends Component {  

    state = { data: [] }

    constructor(props) {
        super(props);
        this.state = {value: ''};

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event){
        this.setState({value: event.target.value});
    }

    handleSubmit(event){
        //alert('A name was submitted: ' + this.state.value);
        this.processInfo();
        event.preventDefault();
    }

    processInfo() {
        if (this.state.username.value == '{userName}' && this.state.password == '{password}' ){
            return <Redirect to='/MemberInfo.jsx' />
        }
    }

    componentWillMount(){
        fetch('https://api.myjson.com/bins/14lgnb', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-type': 'application/json',
                'Authorization': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1lIjoiR3JlZyIsInVuaXF1ZV9uYW1lIjoiZ2dyYWZmIiwibmJmIjoxNTI0ODM5Nzc1LCJleHAiOjE1MjQ5MjYxNzV9.xhvdfaWkLVZ_HLwYQuPet_2vlxNF7AoYgX-XRufiOj0'
            },
            body: JSON.stringify({
                username: 'userName',
                password: 'password',
            })
        }

        ) /*end fetch */
        .then(results => results.json()) 
        .then(data => this.setState({ data: data }))   
      }

    //render component
    render() {
    console.log(this.state.data);
        return (
            <div>

                <div className="container">

                <div className="loginContainer">
                    <h2>Member Login</h2>
                    <form onSubmit={this.handleSubmit}>
                        <div className="form-group">
                            <label for="username">User Name:</label>
                            <input type="text" id="{userName}" value={this.state.value} onChange={this.handleChange} class="form-control"  placeholder="Enter User Name"  />
                        </div>
                        <div className="form-group"> 
                            <label for="pwd">Password:</label>
                            <input type="password" id="{password}" class="form-control"  placeholder="Enter password" name="password" />
                        </div>
                        <div>

                             <input type="submit" value="submit" className="btn btn-primary" /> 
                        </div>
                   </form>
                </div>
            </div>

            </div> 

        );
      }
}

export default Login

import React，{Component}来自'React'；
从'react router dom'导入{Redirect}；
导入“./Login.css”；
类登录扩展组件{
状态={data:[]}
建造师（道具）{
超级（道具）；
this.state={value:''}；
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
手变（活动）{
this.setState（{value:event.target.value}）；
}
handleSubmit（事件）{
//警报（“已提交名称：”+this.state.value）；
this.processInfo（）；
event.preventDefault（）；
}
processInfo（）{
if（this.state.username.value='{username}'&&this.state.password=='{password}'）{
回来
}
}
组件willmount（）{
取（'https://api.myjson.com/bins/14lgnb', {
方法：“POST”，
标题：{
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”，
“授权”：eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.EYJDHRWOI8VC2NOZW1HCY54BWXZB2FWLM9YZY93CY8YMDA2LZW50AXR5L2SYWLTCY9UYW1LIJOIR3JLZYISINV1ZV9UYW9UYW9UYWZMIJJ0ODNZC1LCJLEHAIOJELQ5MJXNZV9.XVDFAWKLWKLWK7AOX-XYG0”
},
正文：JSON.stringify({
用户名：“用户名”，
密码：“password”，
})
}
)/*结束提取*/
.then（results=>results.json（））
.then（data=>this.setState（{data:data}））
}
//渲染组件
render（）{
console.log（this.state.data）；
返回(
会员登录
用户名：
密码：
);
}
}
导出默认登录名

---

我能得到一些指导吗？正如我提到的，我对ReactJS是新手。谢谢

我看到您的代码中有很多问题。 首先用于重定向，您可以从“react router dom”使用With router

---

不能通过返回JSX表达式进行重定向。参见riwu-我收到一条消息，表明const只能在.ts文件中使用（我正在尝试WithRouter方法）；是否有一种更简单的方法，可以在.jsx页面中编写函数？比方说，从代码中已有的processInfo（）函数开始？e、 g.将用户路由到另一个页面的onClick事件？…windows.location.href是否是合适的替代方案？谢谢，尽管我还有很多要学习的内容，但您的解决方案解决了问题。

import { withRouter } from 'react-router-dom'

   processInfo() {
    if (this.state.username.value == '{userName}' && this.state.password == '{password}' ){

      //Add your route there
        this.props.history.push("/yourRoute");
    }
}

export default withRouter(Login);