how to redirect to home page after login: ReactJS?

Question

How to redirect to homepage after successful login in ReactJS? and also how to show error message whenever user enter wrong credential?
I tried something like below, but it not redirect to homepage after successful login and also not showing login failed prompt whenever user hit wrong credential.

It would be great if anybody could figure out where i did mistake.

./src/Login.js

import React, {Component} from "react";
import {Form} from 'antd';
import { Redirect } from "react-router-dom";

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(() => {
        <Redirect to="/home" />
        }).catch((error) => {
      console.log(this.props.state)
      })


    };


 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>

You can use `this.props.history.push('/home')` to go to **Home** after login. You can make `history` object available in your props using `withRouter` HOC from react-router. — Ajeet Shah, May 27 '20 at 07:53

sushildlh · Accepted Answer · 2020-05-27T02:44:24.683

2

You can use

window.location = "/home";

OR

this.props.history.push("/home");

go with any of it.

OR

you can go through Programmatically navigate using react router

edited May 27 '20 at 02:44

answered May 27 '20 at 02:40

sushildlh

8,986
4
33
77

i want to `redirect` only after successful logged in, but it redirecting me even `authentication-failed` – bounty May 27 '20 at 02:44
check with your API using log or debugging. – sushildlh May 27 '20 at 02:45

score 1 · Answer 2 · answered May 27 '20 at 02:45

1

Well I recommend you to use this.props.history.replace('/home'). Since it prevent the user to navigate back.

answered May 27 '20 at 02:45

Nikhil G

2,096
14
18

how to redirect to home page after login: ReactJS?

2 Answers2