Javascript React Router根据组件有条件地导航到不同的页面'；s API调用

使用React Router，我希望根据API调用的结果有条件地导航到三个页面中的一个，但我很难弄清楚如何做到这一点

我曾尝试在if/else中返回带有路由的ConditionalLink，并用它而不是JSX中的链接包装按钮，但这似乎不起作用（可能是因为在提交表单/单击下一步按钮时JSX已经呈现了？）

我在路由器本身中看到了许多其他的问题/答案，但是这个API调用和随后的决定发生在单个组件中

编辑：我不能使用钩子，因为这是一个基于类的组件，并且由于其他约束，必须保留钩子

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的表单中）：

---

您只需使用

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');

const history=useHistory（）；
返回(
// ...
onSubmit=（事件）=>{
setByValue（'showLoadingSpinner'，true）；
数据查找（查询）
。然后（数据=>{
setByValue（'showLoadingSpinner'，false）
保存详细信息（数据）
if（data.isValid）{
history.push（'/foo'）；

---

有关更多详细信息，请参见此部分：

我无法使用挂钩，因为它（出于必要）是一个基于类的组件。我应该在问题中包含它，我将对其进行编辑以指定它。在这种情况下，请参见：

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');