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

Question

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

我尝试在 if/else 中使用路由返回 ConditionalLink 并在 JSX 中用它而不是 Link 包装按钮，但这似乎不起作用（也许因为在单击表单 submitted/next 按钮时 JSX 已经呈现？）。

我已经看到许多其他 questions/answers 在路由器本身内执行此操作，但此 API 调用和后续决定发生在单个组件中。

编辑：我不能使用挂钩，因为这是一个基于 class 的组件并且由于其他限制必须保留一个。

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

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

React Router conditionally navigate to different pages based on a component's API call

javascript

reactjs

react-router

react-router-v4

conditional-rendering