How to redirect to profile page in React after submitting Login and Signup button?

Question

Here is my code for my login page that I want to use to redirect onto a profile page:

import React, { Component } from "react";


export default class Login extends Component {
   
    constructor(props){
        super(props)
        this.state = {
            username: '',
            password: '',
        }
    }
    handleChange = (e) => {
        this.setState({ [e.target.name]: e.target.value });
    }

    handleSubmit = (e) => {
        e.preventDefault();
        const {username, password} = this.state;

        fetch('http://localhost:9000/users/login', {
            method: "POST",
            headers: {
            'Content-Type' : 'application/json'
        },
            body: JSON.stringify(this.state),
            
        })
        .then((result) => result.json())
        .then((info) => {console.log(info)})
        
    }

    render() {
        return (
        <div className="auth-wrapper">
          <div className="auth-inner">
             <form onSubmit={this.handleSubmit}>
                <h3>Sign In</h3>

                <div className="form-group">
                    <label>Username</label>
                    <input type="text" className="form-control" placeholder="Enter email" value={this.state.value} onChange={this.handleChange} name="username" />
                </div>

                <div className="form-group">
                    <label>Password</label>
                    <input type="password" name="password" className="form-control" value={this.state.value} onChange={this.handleChange} placeholder="Enter password" />
                </div>

                <div className="form-group">
                    <div className="custom-control custom-checkbox">
                        <input type="checkbox" className="custom-control-input" id="customCheck1" />
                        <label className="custom-control-label" htmlFor="customCheck1">Remember me</label>
                    </div>
                </div>

                <button type="submit" className="btn btn-primary btn-block">Submit</button>
                <p className="forgot-password text-right">
                    Forgot <a href="#">password?</a>
                </p>
            </form>
          </div>
        </div>
        );
    }
}

import React, { Component } from "react";
import { Redirect } from 'react-router';
import { withRouter } from 'react-router';

export default class SignUp extends Component {
    constructor(props){
        super(props)
        this.state = {
            firstName: '',
            password: '',
            username: '',
            lastName: '',
            email: '',
            isAdmin: 'false',
        }
    }
    onChange = (e) => {
        this.setState({ [e.target.name]: e.target.value });
        console.log(this.state.email)
        console.log(this.state.isAdmin)
      }

    onSubmit = async (e) => {
        e.preventDefault();
        await this.state.isAdmin == "on" ? this.setState({isAdmin: true}) : this.setState({isAdmin: false})
       // const {firstName, lastName, email,} = this.state;

        fetch('http://localhost:9000/users/new', {
        method: "POST",
        headers: {
            'Content-Type' : 'application/json'
        },
        body: JSON.stringify(this.state)
    })
    
    .then((info) => {console.log(info)})
    this.props.history.push('/profile');    
}

    

    render() {
        return (
        <div className="auth-wrapper">
          <div className="auth-inner">
            <form method='POST' action='http://localhost:9000/users/new'>
                <h3>Sign Up</h3>

                <div className="form-group">
                    <label>First name</label>
                    <input type="text" className="form-control" placeholder="First name" name ="firstName"/>
                </div>

                <div className="form-group">
                    <label>Last name</label>
                    <input type="text" className="form-control" placeholder="Last name" name="lastName" />
                </div>

                <div className="form-group">
                    <label>Username</label>
                    <input type="text" className="form-control" placeholder="Username" name="username" />
                </div>

                <div className="form-group">
                    <label>Email address</label>
                    <input type="email" className="form-control" placeholder="Enter email" name="email" />
                </div>

                <div className="form-group">
                    <label>Password</label>
                    <input type="password" className="form-control" placeholder="Enter password" name="password" />
                </div>

                <div className="form-group">
                    <div className="custom-control custom-checkbox">
                        <input type="checkbox" className="custom-control-input" onClick={console.log(this.state.value)} name="isAdmin" id="customCheck1" />
                        <label className="custom-control-label" htmlFor="customCheck1">Signup as Reviewer</label>
                    </div>
                </div>

                <button type="submit" className="btn btn-primary btn-block">Sign Up</button>
                
                <p className="forgot-password text-right">
                    Already registered <a href="#">sign in?</a>
                </p>
            </form>
          </div>
        </div>
        );
    }
}

When I click my profile page I want to redirect to /profile. At the moment it hangs and successfully logs in the user. I have to manually go to /profile to reach the page right now I am using Express as my backend FYI

Edit: I have added my sign up page code as that is not working also and not sure why. Like the login page it hangs

Does this answer your question? [Programmatically navigate using react router](https://stackoverflow.com/questions/31079081/programmatically-navigate-using-react-router) — Sarun UK, Nov 17 '20 at 12:55

score 0 · Answer 1 · answered Nov 17 '20 at 12:53

0

try this

 fetch('http://localhost:9000/users/login', {
        method: "POST",
        headers: {
        'Content-Type' : 'application/json'
    },
        body: JSON.stringify(this.state),
        
    })
    .then((result) => {
     result.json();
     this.props.history.push("/Profile");})
    .then((info) => {console.log(info)})

answered Nov 17 '20 at 12:53

krimo

666
2
8
27

Nice, it worked but I actually same the same issue on the SignUp page and have updated the post with the SignUp page too – Johnny Yip Nov 17 '20 at 13:02
I have used the same code you suggested in login and put it in Sign Up but it doesnt work – Johnny Yip Nov 17 '20 at 13:04
put this.props.history.push("/Profile");}) inside the responce of fetch – krimo Nov 17 '20 at 13:09
you mean like this? .then((info) => {this.props.history.push('/profile')}). Cos this didnt seem to work – Johnny Yip Nov 17 '20 at 13:22
add this .then((result) => { result.json(); this.props.history.push("/Profile");}) – krimo Nov 17 '20 at 13:25
seems it is still the same results. No difference when I try to signup – Johnny Yip Nov 17 '20 at 13:28
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/224676/discussion-between-johnny-yip-and-krimo). – Johnny Yip Nov 17 '20 at 13:36

How to redirect to profile page in React after submitting Login and Signup button?

1 Answers1