如何通过React-router-4删除所有浏览器历史记录

Question

我在SPA中使用react-router。在我的例子中，浏览器历史记录是/home => /somepage1 => /another => /changepassword

当我在路由/changepassword中做一些事情时，我想转到/login路由，并清除所有以前的浏览器历史记录，并将此路由/login设置为历史上的第一个。

我如何才能做到这一点？

Answer 1

TLDR…在某些情况下是可以做到的。

创建浏览器历史记录时的解决方案

我的应用程序是在一个新的浏览器窗口中加载的，因此我确信该应用程序将具有干净的浏览器历史记录，因此我可以使用此命令返回到浏览器历史记录中的第一页：

props.history.go(-(props.history.length - 1))

如果您想要在浏览器历史记录中返回的页面不在1位置，则可以在此开始页面记录history.length的值，然后在准备返回到开始页面时将该数字传递给此函数。

// loading start page…
const startPageIndex = props.history.length - 1

// later when ready to go back to start page…
props.history.go(-startPageIndex)

注意：使用上述任一解决方案返回时，“前进”历史记录将一直存在，直到用户向前导航以创建新的历史记录为止。

MemoryRouter -不存储浏览器历史记录

对于您想要替换历史…的页面流，使用“将您的URL的历史记录保存在内存中(不读写地址栏)”的因为它不会创建浏览器历史记录。

进一步阅读

Michael Jackson，react-router的作者，发布了关于Reset/clear history的this answer

我们没有办法以编程方式重置历史堆栈(至少在浏览器中，在内存历史中这将是微不足道的)。如果您出于某种原因需要清除历史堆栈，我建议您使用window.location.reload()。

进一步的from MDN

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

Answer 2

我不相信这有优雅的支持。但是，历史记录是可变的，因此您始终可以手动编辑历史记录。下面是你如何做到这一点的一个例子：

const history = this.props.history.entries

// set first entry in history to mirror the last entry
history[0] = history[history.length - 1]

// remove all but first history entry
history.length = 1

Answer 3

删除所有历史记录条目

this.props.history.index=0

在componentWillMount函数中的第一个条目中使用此选项