Как перенаправить страницу входа в систему с помощью ReactJS?

Question

Я хочу, чтобы при отправке электронной почты и пароля для входа в систему он был перенаправлен на панель инструментов, мой код указан ниже:

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

     }
   })
  }

Мой маршрут:

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 }]

Когда я запускаю его, я получаю:

Как я могу это исправить, пожалуйста?

Answer 1

используйте withRouter для доступа к реквизитам истории в вашем компоненте:

Вот рабочий пример: https://codeshare.io/5OZbdW

Answer 2

В объекте ответа axios отсутствует метод redirect. Чтобы справиться с этим, вы можете потренироваться со своим маршрутизатором, который вы используете.

Пример:

router.push({ path: '/dashboard' }) Вот так ...

Отредактировано:

Если вы используете react-router: попробуйте извлечь history из реквизита компонента, например:

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