Bdtjtk

I'm trying to redirect the user back to the index page, when a user clicks handleSubmit. However the data gets sent to the backend, but stays on the page with the user information still keyed in.

It does not render an error.

Here is the demo.

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

Navbar

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));

since your action signUp() is not returning anything.
register = this.props.signUp() is always undefined and hence the below line never executes..

(register === true) && this.props.history.push('/');

try returning true/false based on your logic and then try running your code again

Your dispatch call this.props.signUp() is returning undefined, hence this.props.history.push('/') is not executing.

just tried to add a console.log

handleSubmit = (e) =>{

    e.preventDefault();

    const register = this.props.signUp();

    console.log(register);

    (register === true) && this.props.history.push('/');

    console.log(this.state);



}

register dispatch should be returning boolean.