как использовать в Reactjs функциональный компонент history.push

Question

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

function ProfileForm(props) {
 // many code removed
 const onSubmit = (data, e) => {
   e.target.reset();
   history.push({
  pathname:  "/OnSubmit",
  state: {
    response: messageFromServer 
   } 
  }
}
// many code removed
}

Я получил это сообщение об ошибке: -

Неожиданное использование 'history' без ограничений-глобалов

После поиска ошибки я обнаружил подобный вид ответа для местоположения. Ответ был: Try adding window before location (i.e. window.location). Итак, я попытался: -

  window.history.push({
  pathname:  "/OnSubmit",
  state: {
    response: messageFromServer 
  } 
}

получил новую ошибку: -

Необработанный отказ (TypeError): window.history.pu sh нет функция

Answer 1

Я думаю, что вы обрабатываете маршрутизацию с react-router. Если это так, вам нужно использовать объект истории, который передается через ReactRouterContext. Для этого вам нужно использовать useHistory ловушку, чтобы получить объект history.

// ...
import { useHistory } from "react-router";
// ...


function ProfileForm(props) {
  const history = useHistory();
  const onSubmit = (data, e) => {
     e.target.reset();
     history.push({
        pathname:  "/OnSubmit",
        state: {
          response: messageFromServer 
        } 
     }
  }
}

Answer 2

Если вы используете import { withRouter } from "react-router-dom"; В вашем функциональном компоненте, вы не пропустили props.history.push?