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

IT技术 reactjs react-router-v4
2021-05-17 23:25:52

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

当我在路线中做某事时/changepassword,我想去/login路线,并清除所有以前的浏览器历史记录并使这条路线/login成为历史上的第一条路线

我怎样才能做到这一点?

3个回答

TLDR……它可以在某些条件下完成。

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

我的应用程序已加载到新的浏览器窗口中,因此我确定该应用程序将具有干净的浏览器历史记录,因此我可以使用它返回浏览器历史记录中的第一页:

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

如果浏览器历史记录中您要返回的页面不在 position 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 发布了有关重置/清除历史记录的答案

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

进一步来自 MDN

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

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

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

删除所有历史条目

this.props.history.index=0

componentWillMount函数中使用,您希望这将是第一个条目