路由器不会在函数内重定向

Question

我正在创建一个跟踪 Celery 后台作业状态的函数。 基本上，后台作业将向前端发送一个 JSON，如果未完成，则带有单词PENDING，如果已完成，则SUCCESS。 我每秒都在通过调用setTimeout检查 JSON 是否已更改。

但是，当函数输入 else，语句时，我被打印在控制台console.log("redirect")但它不执行代码：return <Redirect to={{pathname: '/dashboard/'}}/>

路由工作，因为我试图重定向到if-else语句之外

我不确定为什么它不重定向。

function MyComponent() {
...
function updateProgress(statusUrl) {
const celeryStatus = fetch(statusUrl)
.then(response => response.json())
.then(jsonData => {checkStatus(jsonData, statusUrl)})
}
function checkStatus(jsonData, statusUrl) {
if (jsonData.state === "PENDING") {
console.log("inside pending")
setTimeout(function() {
updateProgress(statusUrl);
}, 1000);
} else {
console.log("redirect")
return <Redirect to={{pathname: '/dashboard/'}}/>
}
}
# Calling the functions
return ...
}

Answer 1

您正在从不渲染任何内容的函数返回组件，重定向组件应放在 render(( 方法或函数组件中

如果这是反应路由器

import { useHistory } from 'react-router';

然后，以编程方式导航

const history = useHistory();
if(someCondition){
history.push('/somewhere');
}

Answer 2

你可以尝试使用下面

this.props.history.push({
pathname: '/dashboard',
})