Как я могу перенаправить на страницу только в том случае, если действие на странице действий успешно выполнено при выполнении вызова API-сообщения

Question

У меня есть компонент формы, и после заполнения формы и помещения всех данных, если вы нажмете кнопку «Отправить», она перейдет в proectaction и выполнит запрос axios api post. в случае успеха я хочу вернуться к "/ приборной панели"

/* eslint-disable comma-dangle */
/* eslint-disable arrow-parens */
import axios from 'axios';
// import { useHistory } from 'react-router-dom';
import { GET_ERRORS } from './types';


const createProject = (project) => async dispatch => {
  await axios.post('http://localhost:8080/api/project', project)


    .catch((error) => {
      dispatch({
        type: GET_ERRORS,
        payload: error.response.data
      });
    });
};


export default createProject;

Answer 1

Вы можете сделать что-то вроде этого:

РЕДАКТИРОВАТЬ: убедитесь, что вы передаете реквизит истории в действие, или сделать толчок, когда вы используете действие над компонентом.

const createProject = (project, history) => async dispatch => {
  try {
    await axios.post('http://localhost:8080/api/project', project)
    history.push('/')       // <---- Make the push here only after post success.
  } catch(error) {
    dispatch({
        type: GET_ERRORS,
        payload: error.response.data
      });
  }
};

попробуйте перехватить блок, а затем протолкнуть историю на другой маршрут.

в качестве альтернативы:

const createProjectHandler = async () => {
  createProject(project).then(() => {
    props.history.push('/')
  })

}

это работает только при возврате вызова axios. Я не уверен, что то же самое с async и await.