history.push 使用 react-router-dom

Posted 2023-02-22

【中文标题】history.push 使用 react-router-dom

【英文标题】：history.push using react-router-dom

【发布时间】：2021-02-01 04:23:39

【问题描述】：

我正在使用下面提供的 history.push 从一个页面导航到另一个页面

import withRouter from 'react-router-dom

我能够正确导航，但我有一个要求，如果我从页面 A 移动到页面 B，则不应允许我使用浏览器后退按钮返回上一页。

我知道这可以通过 window.redirect 来实现，但我不想使用它。问题是整个状态和 redux 存储信息都丢失了。有谁知道我是否可以使用 withRouter 并且仍然能够达到上述要求。

【问题讨论】：

您可以使用browserHistory.replace 而不是browserHistory.push 从浏览历史记录中删除A。这样，如果用户去 B，他将无法去 A，而是去 A 之前的 URL。

【参考方案1】：

您可以使用history.replace('/Whatever_screen') 替换堆栈中的当前页面。

replace(path, [state]) - (function) 替换历史堆栈上的当前条目。

第二个选项：

您可以使用以下代码阻止用户返回历史记录。

 componentDidMount() 
    const  history  = this.props;
    window.onpopstate = function (event) 
      history.go(1);
    ;
  

工作示例：

MDN 参考here:

无法清除会话历史记录或禁用非特权代码的后退/前进导航。最接近的可用解决方案是 location.replace() 方法，它将会话历史记录的当前项替换为提供的 URL。

【讨论】：

该死的。感谢这个功能。但问题是所有商店和状态信息都丢失了

好的，所以您只想在一页中禁用浏览器后退按钮？

是的，让我为您提供一个工作示例，给我一些时间

更新ans，可以试试

非常感谢 Sohail。我希望我能给这个答案更多的评价。这很有帮助