this.props.history未重定向到首页

Question

当用户单击handleSubmit时，我试图将用户重定向回索引页面。但是，数据被发送到后端，但仍停留在页面上，仍然输入用户信息。

它不会产生错误。

这是演示。

https://stackblitz.com/edit/react-h9ekc4

导航栏

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
import SignUp from './SignUp';
import SignIn from './SignIn';
const Navbar = () => {
    return(

    <Router>
        <div>
        <nav className="navbar navbar-expand-lg navbar-light bg-light ">
          <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample08" aria-controls="navbarsExample08" aria-expanded="false" aria-label="Toggle navigation">
            <span className="navbar-toggler-icon"></span>
          </button>

          <div className="collapse navbar-collapse justify-content-md-center" id="navbarsExample08">
            <ul className="navbar-nav">
                <li className="nav-item">
                    <Link className="nav-link" to="/SignUp">Sign Up </Link>
                </li>
                <li className="nav-item">
                    <Link  className="nav-link" to="/SignIn">Sign In </Link>
                </li>

            </ul>
          </div>
        </nav>
        <Route path="/SignUp" component={SignUp} />
        <Route path="/SignIn" component={SignIn} />

    </div>
    </Router>
    );

}

export default Navbar;

SignUp.js

import React, {Component} from 'react';
import { withRouter } from "react-router-dom";
import { connect } from "react-redux";
import {signUp ,onEmailSignUpChangeAction,onPasswordSignUpChangeAction} from '../actions/';
class SignUp extends Component {
    state = {
        email: "",
        password: ""
    }

    // onChange = (e) =>{
    //   this.setState({
    //       [e.target.name] : e.target.value
    //   })
    // }
    handleSubmit = (e) =>{
        e.preventDefault();
        const register = this.props.signUp();
        // this.props.history not working
        (register === true) && this.props.history.push('/');
        console.log(this.state);

    }
    render() {
        return (
            <div className="container">
                <div className="row">
                    <div className="col-md-6">
                        <h1>Sign Up</h1>
                        <div>
                            <div className="form-group">
                                <label htmlFor="exampleInputEmail1">Email address</label>
                                <input
                                    type="email"
                                    className="form-control"
                                    id="email"
                                    onChange={this.props.onEmailSignUpChangeAction}
                                    aria-describedby="emailHelp"
                                    value={this.props.emailSignUp}
                                    placeholder="Enter email"/>
                                <small id="emailHelp" className="form-text text-muted">We'll never share your email with anyone else.</small>
                            </div>
                            <div className="form-group">
                                <label htmlFor="exampleInputPassword1">Password</label>
                                <input
                                    type="password"
                                    className="form-control"
                                    id="password"
                                    value={this.props.passwordSignUp}
                                    onChange={this.props.onPasswordSignUpChangeAction}
                                    placeholder="Password"/>
                            </div>

                            <button type="submit" onClick={this.handleSubmit} className="btn btn-primary">Submit</button>
                        </div>
                    </div>

                </div>
            </div>

        );
    }

}

const mapStateToProps = (state) => ({
    user: state.auth.user,
    emailSignUp:state.signUpAuth.emailSignUp,
    passwordSignUp:state.signUpAuth.passwordSignUp

})

const mapDispatchToProps = (dispatch) => ({
    signUp: () => dispatch(signUp()),
    onEmailSignUpChangeAction: (event) => dispatch(onEmailSignUpChangeAction(event.target.value)),
    onPasswordSignUpChangeAction: (event) => dispatch(onPasswordSignUpChangeAction(event.target.value)),
}); 


export default withRouter(connect(mapStateToProps, mapDispatchToProps)(SignUp));

Answer 1

因为您的操作signUp（）未返回任何内容。 register = this.props.signUp（）始终未定义，因此以下行将永远不会执行。.

（寄存器=== true）&& this.props.history.push（'/'）;

尝试根据您的逻辑返回true / false，然后尝试再次运行代码

Answer 2

您的调度调用this.props.signUp()返回undefined，因此this.props.history.push('/')未执行。

只是尝试添加一个console.log

handleSubmit = (e) =>{
    e.preventDefault();
    const register = this.props.signUp();
    console.log(register);
    (register === true) && this.props.history.push('/');
    console.log(this.state);

}

注册分发应该返回布尔值。