React Router условно переходить на разные страницы на основе вызова API компонента

Question

Используя React Router, я хочу перейти на одну из трех страниц, условно, в зависимости от результата вызова API, но мне сложно понять, как это можно сделать.

Я попытался вернуть ConditionalLink с маршрутом в if / else и обернуть его кнопкой вместо Link в JSX, но это, похоже, не работает (возможно, потому что JSX уже отображался в то время форма отправлена ​​/ нажата следующая кнопка?).

Я видел ряд других вопросов / ответов для выполнения этого в самом маршрутизаторе, но этот вызов API и последующее решение происходят в отдельном компоненте.

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

Код для основы c logi c вызова API :

onSubmit = (event) => {

        setByValue('showLoadingSpinner', true);

        api.dataLookup(query)
            .then(data => {
                setByValue('showLoadingSpinner', false)
                saveDetails(data)
                if (data.isValid) {
                    // Navigate to first page
                } else {
                    // Navigate to second page
                }
            })
            .catch(error => {
                setByValue('showLoadingSpinner', false)
                console.log(error)
                // Navigate to third page
            })
    }
}

JSX («nextButton» вложен в форму, которая вызывает onSubmit):

<div className={classes.button}>
    <Link to="/nextpage">
        <NextButton text="Next"/>
    </Link>
</div>

Answer 1

Вам просто нужно использовать хук useHistory, чтобы получить объект history, а затем вы можете использовать history.push(someUrl), чтобы отправить вашего пользователя куда угодно, из вашего AJAX обратного вызова.

const history = useHistory();

return (<div className={classes.button}>
  <Link to="/nextpage">
      <NextButton text="Next" history={history}/>

// ...


onSubmit = (event) => {
    setByValue('showLoadingSpinner', true);
    api.dataLookup(query)
        .then(data => {
            setByValue('showLoadingSpinner', false)
            saveDetails(data)
            if (data.isValid) {
                history.push('/foo');

Подробнее об этом см .: https://reacttraining.com/react-router/web/api/Hooks/usehistory