Условное перенаправление с помощью React Router (История)

Question

После моего handleSubmit я хочу либо перенаправить на другую страницу, если handleSubmit был успешным, либо остаться на той же странице, если нет. На странице отображается сообщение об ошибке (из состояния redux), если оно не сработало.

Проблема с handleSubmit заключается в том, что он предполагает, что функция успешно выполнена, поскольку сообщение об ошибке не отображается до выполнения функции.

Есть идеи, как я могу это сделать? Есть ли что-то, что я могу сделать в моем рендере, или мне нужно отправить более полезный ответ от Post Request - отправьте его с помощью Redux и прочитайте от взгляда.

Я полностью застрял и собирался в кругах.

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import GameBoard from '../components/GameBoard';
import { connect } from 'react-redux';
import {fetchGameData} from '../store/actions/game'
import { beerEntryToggle, submitEntry } from '../store/actions/entry';

class Game extends Component {
    constructor(props) {
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
  }
  componentDidMount() {
    this.props.fetchGameData()
  }

    handleSubmit(evt) {
        evt.preventDefault();
        let data = this.props.entry;
    this.props.submitEntry(data);
    if(this.props.entry.length === 6 && this.props.errors.message == null){
      this.props.history.push('/')
    }
    }

    render() {
        const { game, beerEntryToggle, errors, entry } = this.props;
        return (
            <div>
                {errors.message && (
                    <div className="alert alert-danger">{errors.message}</div>
        )}

                <h1>PICK 6 BEERS FOR YOUR ENTRY</h1>
                {entry.length > 5 ? (
                    <button onClick={this.handleSubmit}> SUBMIT YOUR ENTRY </button>
                ) : null}
                <GameBoard beers={game} entryToggle={beerEntryToggle} entry={entry} />
            </div>
        );
    }
}

function mapStateToProps(state) {
    return {
        game: state.currentGame.beer,
        entry: state.entry,
        errors: state.errors,
    };
}

const mapDispatchToProps = {
    beerEntryToggle,
  submitEntry,
  fetchGameData
};

export default withRouter(
    connect(
        mapStateToProps,
    mapDispatchToProps,
    )(Game)
);

Это функция для отправки почтового запроса - я просто отправляю созданную запись из MongoDB // Mon goose обратно в качестве ответа как JSON. Это работает, я получаю ответ в инструментах разработчика /, и запись добавлена ​​в DB

export const submitEntry = entry => (dispatch, getState) => {
  let { currentUser } = getState();
  const id = currentUser.user.id;
  return apiCall('post', `/api/user/${id}`, entry )
  .then(res => (res))
  .catch(err => dispatch(addError(err.message)));
};

export function apiCall(method, path, data) {
    return new Promise((resolve, reject) => {
        return axios[method](path, data)
            .then(res => {
                return resolve(res.data);
            })
            .catch(err => {
                return reject(err.response.data.error);
            });
    });
}