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

Question

我在SPA中使用react-router。 就我而言， 浏览器历史记录为/home =＆gt; /somepage1 =＆gt; /another =＆gt; /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-不存储浏览器历史记录

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

---

进一步阅读

react-router的作者迈克尔·杰克逊（Michael Jackson）关于this answer发表了Reset/clear history：

  

我们无法以编程方式重置历史记录堆栈（至少在浏览器中，在内存历史记录中这是微不足道的）。如果出于某种原因需要清除历史记录堆栈，建议您使用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 函数中使用，您希望这将是第一个条目

Answer 4

我不确定这是否行得通。值得一试

history.replace('', null);