为什么history.push在历史堆栈中产生2个对象，react-router-dom答案

【问题标题】：why history.push produce 2 objects in history stack, react-router-dom为什么history.push在历史堆栈中产生2个对象，react-router-dom
【发布时间】：2021-06-09 07:19:12
【问题描述】：

我正在使用“react-router-dom”库。

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

const App = () => {
    window.lib_history = useHistory();

    return /*doesnt matter*/;
}

我从控制台推送了一些页面，但在浏览器历史记录和库历史记录中出现了 2 个对象。

/*in console*/

console.log(window.history.length, lib_history.length); // return 11  10 <--it is okay

lib_history.push('/page2'); // redirect successfully

console.log(window.history.length, lib_history.length); // return 13  12 < -- why not 12  11??

作为一个主要问题 - 用户必须单击浏览器后退按钮 2 次才能获得上一页。我应该在哪里寻找问题？

【问题讨论】：

什么是window.lib_history？您只是想创建一个全局历史对象吗？
useHistory() 给出了一个实例，我曾经在文档中导航：here
抱歉，问题不是history 是什么，而是为什么要保存它的一个实例（来自钩子）。一般来说，如果你需要做一些事情，比如创建一个全局历史对象，你会关注this setup。

标签： reactjs react-router-dom back-button browser-history

【解决方案1】：

我的项目中有一个 iframe，它破坏了整个浏览器选项卡的历史堆栈。感谢您提供有关设置历史记录的提示，这也很有帮助。

【讨论】：