如何通过 React-router-4 删除所有浏览器历史记录 [英] how to remove all the browser history by React-router-4

问题描述

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

当我在路由 /changepassword 中做某事时，我想去 /login 路由，并清除所有以前的浏览器历史记录并创建此路由 /login 历史上第一个.

我怎样才能做到这一点?

解决方案

TLDR... 可以在某些情况下完成.

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

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

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

如果浏览器历史中要返回的页面不在1位置，可以在这个Start page记录history.length的值，然后通过当您准备好返回起始页时，将该数字输入到此函数中.

//加载起始页...const startPageIndex = props.history.length - 1//稍后准备返回起始页时...props.history.go(-startPageIndex)

注意:当使用上述任一解决方案返回时，前进"历史将仍然存在，直到用户向前导航以创建新历史.

MemoryRouter - 不存储浏览器历史

使用对于您希望替换历史记录的页面流，它将您的URL"的历史记录保留在内存中(不读取或写入地址栏)……因为它不会创建浏览器历史记录.

<小时>

进一步阅读

react-router 的作者 Michael Jackson 发布了这个答案 关于重置/清除历史记录:

<块引用>

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

进一步来自 MDN::><块引用>

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

I am using react-router in a SPA. In my case, the browser history is /home => /somepage1 => /another => /changepassword

when I do some thing in the route /changepassword, I wanna go to the /login route, and clear all the previous browser history and make this route /login the 1st in the history.

How can I achieve this?

解决方案

TLDR… it can be done in some conditions.

A Solution when creating browser history

My App is loaded in a new browser window, thus I'm certain the app will have a clean browser history, so I can use this to get back to the first page in the browser history:

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

If page you want to return to in the browser history was not at position 1, you can record the value of history.length at this Start page and then pass that number into this function when you're ready to go back to the Start page.

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

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

Note: When going back by using either of the above solutions, the "forward" history will still exist until the user navigates forward to create new history.

MemoryRouter - doesn’t store browser history

Use the <Memory Router> which "keeps the history of your "URL" in memory (does not read or write to the address bar)" for the flow of pages where you wish to replace the history… because it will not create a browser history.

---

Further Reading

Michael Jackson, the author of react-router, posted this answer regarding Reset/clear history:

There's no way for us to programmatically reset the history stack (at least in a browser, in memory history this would be trivial). If you need to clear the history stack for some reason, I'd suggest you use window.location.reload().

Further from MDN:

There is no way to clear the session history or to disable the back/forward navigation from unprivileged code. The closest available solution is the location.replace() method, which replaces the current item of the session history with the provided URL.

这篇关于如何通过 React-router-4 删除所有浏览器历史记录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！