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

Question

使用 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>

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