React 路由器 - useHistory / useNavigate 与 window.history.back()

Question

我有一个导航后退按钮，在检查返回时我发现了两种方法：

1. 原生方式：

window.history.back()

或者

window.history.go(-1)

2. 反应路由器方式：

export const BackButton: FC = () => {
  const navigate = useNavigate();

  return (
      <button
        onClick={() => navigate(-1)}>
          Back
      </button>
  );
}

或对于 v5

export const BackButton: FC = () => {
  const { goBack } = useHistory();

  return (
      <button
        onClick={goBack}>
          Back
      </button>
  );
}

所以我想知道这些方式之间有什么区别。

我猜测（没有检查源代码）在引擎盖下反应路由器使用本机方式并做更多的事情，如果我使用反应路由器那么我应该使用反应路由器方式但我仍然想了解差异。

谢谢！

Answer 1

它们都映射回window.history对象。goBack也被实现为go(-1). window.history使用对象与使用react-router history对象（v5）或函数（v6）之间的主要区别navigate在于，使用window.history将影响React外部react-router的导航更改，而使用history或navigate将在react-router影响更改之前通过更新其内部路由上下文来在内部正确处理使用浏览器。

将window.history“方式”视为 React 无法意识到或无法很好处理的一种“全局突变”。

使用window.history将重新加载页面，而使用react-router只会更新地址栏中的 URL 以及应用程序内部的渲染/重新渲染路由等，即不会重新加载页面，并且应用程序始终保持安装状态并运行。