如何使用 <Link> 执行类似于 JS React 中的“ window.location = "/GameOverDied"; ”的操作？

Question

目前我正在尝试用我在 React 中构建的游戏进行一些动画过渡，但我不想要

href

或

window.location

的重新渲染/刷新功能。在这方面我将如何使用

<Link>

中的

react-router-dom

处理？

const handleGameOver = () => {
  if (health < 1) {
    window.location = "/GameOverDied";
  } else if (fuel < 1) {
    window.location = "/GameOverFuel";
  } else {
  }
};

我还没有尝试过任何东西，因为我没有得到我在其他地方寻找的答案。

Answer 1

使用

useNavigate

挂钩从回调中发出 命令式 导航操作。

示例：

import { useNavigate } from 'react-router-dom';

...

const navigate = useNavigate();

...

const handleGameOver = () => {
  if (health < 1) {
    navigate("/GameOverDied", { replace: true });
  } else if (fuel < 1) {
    navigate("/GameOverFuel", { replace: true });
  } else {
  }
};

...