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

Posted 2023-02-22

【中文标题】React Router 根据组件的 API 调用有条件地导航到不同的页面

【英文标题】：React Router conditionally navigate to different pages based on a component's API call

【发布时间】：2020-07-31 07:15:55

【问题描述】：

使用 React Router，我想根据 API 调用的结果有条件地导航到三个页面之一，但我无法弄清楚如何做到这一点。

我尝试在 if/else 中使用路由返回 ConditionalLink 并用该按钮而不是 JSX 中的 Link 包装按钮，但这似乎不起作用（可能是因为 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 的表单中）：

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

【参考方案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

【讨论】：

我不能使用钩子，因为它（出于必要）是一个基于类的组件。我应该在问题中包含它，我将对其进行编辑以指定它。

在这种情况下，请参阅：***.com/questions/42701129/…