我react-router
在 SPA 中使用。就我而言,浏览器历史记录是/home
=> /somepage1
=> /another
=>/changepassword
当我在路线中做某事时/changepassword
,我想去/login
路线,并清除所有以前的浏览器历史记录并使这条路线/login
成为历史上的第一条路线。
我怎样才能做到这一点?
我react-router
在 SPA 中使用。就我而言,浏览器历史记录是/home
=> /somepage1
=> /another
=>/changepassword
当我在路线中做某事时/changepassword
,我想去/login
路线,并清除所有以前的浏览器历史记录并使这条路线/login
成为历史上的第一条路线。
我怎样才能做到这一点?
我的应用程序已加载到新的浏览器窗口中,因此我确定该应用程序将具有干净的浏览器历史记录,因此我可以使用它返回浏览器历史记录中的第一页:
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)
注意:当使用上述任一解决方案返回时,“前进”历史将仍然存在,直到用户向前导航以创建新历史。
使用<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函数中使用,您希望这将是第一个条目