使用 useHistory 重定向页面并在点击为 false 时删除图像

Question

我尝试使用 useEffect 将正确的顺序与正确的点击进行比较，如果正确，则自动重定向到另一个页面。如果您犯了四次错误，您将被重定向到松散页面，每次错误都会删除一张图片。如何重定向页面以及如何在点击错误时删除图像？

useEffect(() => {
const correctSequence = [4, 5, 7, 8, 9];
if (correctSequence === sequence) {<Redirect to="/Win" />;
} else {<Redirect to="/Loose" />;}
console.log(sequence);
console.log(correctSequence);}, [sequence]);

Demo

Answer 1

您不能使用 <Redirect /> 直接从 useEffect 重定向，您需要：

props.history.push('/Win')

与 /Loose 相同。

不要忘记用 withRouter.

包装您的组件

Answer 2

您可以使用 useHistory() 反应挂钩。制作一个函数来检查订单是否正确并使用历史记录。

const history = useHistory();

const correctSequence = [4, 5, 7, 8, 9];

const compare = () => {
  if (correctSequence === sequence){
    history.push("/Win");
  } else {
    history.push("/Loose");
  }
}

使用 useHistory 重定向页面并在点击为 false 时删除图像

Redirect pages using useHistory and remove image when click is false

arrays

reactjs

react-router-dom

react-functional-component