Question

使用react的history / createBrowserHistory，并想知道是否有办法清除整个历史记录。当用户退出应用程序时，想要清除整个历史记录（可能是在应用程序中首次使用历史记录时）。我看了here，但没有看到这样做的功能。

Answer 1

在reactJS中，您应该使用browserHistory来实现此目的。这会照顾你的历史，你不需要自己实现这些功能。

browserHistory有两个方法push（）和replace（），它们执行相同的功能

HTML5历史记录API为Adding and modifying history entries提供了两种方法。

pushState()：保留了后退状态 replaceState()：没有后退状态

假设您正在使用react-router。所以，在你的组件上使用

this.props.history.replaceState('your new state')

了解详情：https://developer.mozilla.org/en-US/docs/Web/API/History_API

Answer 2

当文档无法解释我需要的功能时，我立即跳转到单元测试。大多数（好）单元测试能够清除从上一个修改过的任何状态。对此库的良好测试必须在每次测试之前清理浏览器历史记录。我应该是我们看到的第一件事。正如我所怀疑的，first test suite似乎正在清除第11行的内容。

window.history.replaceState(null, null, "/");

然而，这并不是你想要的。它实际上替换了您当前所在URL的当前状态对象。看起来您正在寻找的功能已被拒绝并反对。但为什么？因为删除用户浏览器历史记录不是很好。有人认为这个功能是一个安全问题。 ＆＃34;但我希望允许用户按下后退按钮，但确保不跟踪历史记录，我现在就想要它！ - 这实际上可能有点破解。您很可能必须为此创建自己的库，因为通常认为禁用后退按钮是不好的做法。

如果您的用户真的想要它，我猜您可以做这样的事情，但如果Chrome决定这违反规则，它可能会停止工作。

// manage your own history instead of letting the browser do it
const url_history = [];

// hack to disable the back button
window.addEventListener('popstate', function() {
  // do not disable back button if the array is empty
  var last = url_history.pop();
  if (last) {
    history.pushState(last.state, last.name, last.url);
  }
});

function push_url(state, name, url) {
  url_history.push({
    state: state,
    name: name,
    url: url
  });
  history.pushState(state, name, 'url');
}

// add initial history entry
history.pushState(null, null, '/');

清除反应浏览器历史记录的方法？

2 个答案: