как создать страницу входа в реаги-редукс с помощью axios

Question

Я создал страницу входа в систему, но моя проблема заключается в том, что после нажатия кнопки отправки она не перенаправляет мою главную страницу панели инструментов.

Аутентификация / вход в систему. js

import React, { Component } from 'react'
import { Field, reduxForm } from 'redux-form';
import renderField from 'components/FormInputs/renderField';
import axios from "axios";
import { Route, router } from 'react-router-dom';
import { withRouter } from 'react-router-dom';

class Login extends Component {
  constructor(props) {
    super(props)

    this.state = {
      email: '',
      password: '',
    }
  }

  changeHandler = e => {
    this.setState({ [e.target.name]: e.target.value })
  }


  submitHandler = e => {
    e.preventDefault()

    console.log(this.state)
    `axios.post('http://localhost/api/validuser2', {
      user: {
        "email": this.state.email,
        "password": this.state.password
      }
    },
    { withCredentials: true })`
    .then(res => {
      console.log(res.data[0])
      if (res.data[0] === true) {
        alert('Login Successful')
        `this.props.handleSuccessfulAuth(res.data[0])`
        alert('Logged in')
      }
    })
    .catch(error => { 
      console.log(error)
    })
  }

  render() {
    const { email, password } = this.state
    return (
      <div className="card">
    <div className="header">
      <h4>Login</h4>
    </div>
    <div className="content">
      <form className="form-horizontal" onSubmit = {this.submitHandler} >

      <div className="form-group">
          <label className="control-label col-md-3">Email</label>
          <div className="col-md-9">
            <Field
              name="email"
              type="email"
              value={email}
              //error={errors.email}
              component={renderField}
              onChange={ this.changeHandler } />
          </div>
        </div>

        <div className="form-group">
          <label className="control-label col-md-3">Password</label>
          <div className="col-md-9">
            <Field
              name="password"
              type="password"
              value={password}
              //error={errors.password}
              component={renderField}
              onChange={ this.changeHandler } />
          </div>
        </div>

        <button className="btn btn-success btn-fill btn-wd">Success</button>
      </form>
    </div>
  </div>
    )
  }
}

export default reduxForm({
  form: 'formElements'
})(Login);   

Аутентификация / индекс. js

import React, { Component } from 'react';
import Login from './Login';
import Footer from './Footer';

class Authentication extends Component {
  constructor(props) {
    super(props);

    this.handleSuccessfulAuth = this.handleSuccessfulAuth.bind(this);
  }

  handleSuccessfulAuth(data) {
    this.props.handleLogin(data);
    `this.props.history.push("../main")`
  }

  render() {
    return (
      <div className="wrapper">
      <div className="content">
      <div className="container-fluid">
      <div className="row-md-2">
        <div className="col-md-8">
          <div className="main-panel">
            <Login handleSuccessfulAuth={this.handleSuccessfulAuth} />
          </div>
        </div>
        <div className="main-panel">
            <Footer />
        </div>
      </div>
      </div>
      </div>
      </div>
    )
  }
}

export default Authentication;

источник / индекс. js

import React from 'react';
import ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';
import { HashRouter } from 'react-router-dom';
import './assets/styles/base.scss';
import 'sweetalert/dist/sweetalert.css';
import Authentication from './pages/Authentication';
import configureStore from './config/configureStore';
import { Provider } from 'react-redux';

const store = configureStore();
const rootElement = document.getElementById('root');

const renderApp = Component => {
  ReactDOM.render(
    <Provider store={store}>
      <HashRouter>
        <Component />
      </HashRouter>
    </Provider>,
    rootElement
  );
};

renderApp(Authentication);

if (module.hot) {
  `module.hot.accept('./pages/Authentication', () => {
    const NextApp = require('./pages/Authentication').default
    renderApp(NextApp);`
  });
}

registerServiceWorker();

Answer 1

можно использовать window.location.href , а также this.props.history.pu sh ("../ панель инструментов")

submitHandler = e => {
    e.preventDefault()

    console.log(this.state)
    `axios.post('http://localhost/api/validuser2', {
      user: {
        "email": this.state.email,
        "password": this.state.password
      }
    },
    { withCredentials: true })`
    .then(res => {
      console.log(res.data[0])
      if (res.data[0] === true) {
        alert('Login Successful')
        //window.location.href = dashboardUrl;
        `this.props.handleSuccessfulAuth(res.data[0])`
        alert('Logged in')
      }
    })
    .catch(error => { 
      console.log(error)
    })
  }