【问题标题】：how to remove all the browser history by React-router-4如何通过 React-router-4 删除所有浏览器历史记录
【发布时间】：2018-01-31 14:43:26
【问题描述】：

我在 SPA 中使用 react-router。就我而言，浏览器历史是/home => /somepage1 => /another => /changepassword

当我在路由/changepassword做一些事情的时候，我想去/login路由，清除所有以前的浏览器历史，让这条路由/login成为历史上的第一个。

我怎样才能做到这一点？

【问题讨论】：

听起来很合法……
@cweiskec 我是个菜鸟，你能解释一下这个的更多细节吗？
查看How to change router dynamically 的答案，但不确定如何清除所有历史记录。

标签： reactjs react-router-v4

【解决方案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 - 不存储浏览器历史记录

使用<Memory Router>“将您的“URL”的历史记录保存在内存中（不会读取或写入地址栏）”用于您希望替换历史记录的页面流......因为它不会创建浏览器历史记录。

进一步阅读

react-router 的作者 Michael Jackson 就 Reset/clear history 发帖 this answer：

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

进一步from MDN：

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

【讨论】：

【解决方案2】：

删除所有历史记录

this.props.history.index=0

在 componentWillMount 函数中使用您想要的第一个条目

【讨论】：

欢迎来到 StackOverflow。仅包含代码的答案往往会被标记为删除，因为它们是“低质量”的。请阅读有关回答问题的帮助部分，然后考虑在您的回答中添加一些评论。

【解决方案3】：

我不相信对此有优雅的支持。然而，历史是可变的，因此您始终可以手动编辑历史。以下是您可以如何执行此操作的示例：

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

【讨论】：