How to redirect login page to dashboard using ReactJS?

Question

I want when I submit the email and the password to login, it will be redirected to the dashboard, my code is below :

     handleClick(event){
    
    var payload={
      "email":this.state.email,
        "password":this.state.password
    }
    axios({
          method: 'post',
          url: '/app/login/',
          data: payload,
          withCredentials: true,
          headers: {
            'Access-Control-Allow-Origin': '*',
            'Content-Type': 'application/json',
            'Accept': 'application/json',
          }
        })
   
   .then(function (response) {
     console.log(response);
     if(response.data.code == 200){
          response.redirect('http://localhost:5000/#/dashboard');

     }
     else if(response.data.code == 204){
       swal("Erreur !", "Vérifiez vos champs SVP !", "error");
      
     }
     else{
       swal("Erreur !", "Username inexistant !", "error");
      
     }
   })
  }

My route :

import React from 'react';
import Loadable from 'react-loadable'
const Dashboard = Loadable({
  loader: () =>
    import ('./views/Dashboard'),
  loading: Loading,
});
const routes = [
{ path: '/dashboard', name: 'Dashboard', component: Dashboard }]

When I run it, I get :

How can I fix that please ?

I mean for navigation how are you doing routing ? please share your code — Sakhi Mansoor
– Sakhi Mansoor, Commented Sep 3, 2018 at 17:46

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

There is no redirect method in axios response object. To handle this you might workout with your router which you use.

Example:

router.push({ path: '/dashboard' }) Like this...

Edited:

In case you using react-router: try to extract history from component props, like this:

this.props.history.push('/dashboard')

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Sep 3, 2018 at 17:38

Artem Mirchenko

2,1701 gold badge11 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ichrak Mansour Over a year ago

I get : × Unhandled Rejection (TypeError): __WEBPACK_IMPORTED_MODULE_5_react_router__.a.push is not a function

Ichrak Mansour Over a year ago

I get Unhandled Rejection (TypeError): Cannot read property 'props' of undefined I edit my post

Sakhi Mansoor · Accepted Answer · 2018-09-03 18:33:32Z

2

use withRouter to access history props in your component:

here is working example : https://codeshare.io/5OZbdW

answered Sep 3, 2018 at 18:33

Sakhi Mansoor

8,1325 gold badges24 silver badges38 bronze badges

Collectives™ on Stack Overflow

How to redirect login page to dashboard using ReactJS?

2 Answers 2

Example:

Edited:

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Example:

Edited:

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related