访问React Router历史堆栈 [英] Access React Router history stack

问题描述

我有一个应用程序，您可以通过各种方式（搜索，按类别向下钻取等）找到相册列表。在相册中，单击打开的照片，然后使用向左/向右箭头以及各种编辑工具对其进行遍历。每个迭代/工具操作都执行一个history.push（）以将路由添加到路由器历史记录中。我正在尝试实现一个按钮，该按钮将在您开始查看单张照片之前返回到历史记录中的确切位置。为此，我想将历史记录堆栈向后移动到历史记录与几种模式中的一种匹配的点，然后执行history.go（-14）（或其他方法）以跳回到开始整个过程​​的路线链。

I have an application where you arrive at a photo album listing via various means (searching, drill down by category, etc). From the album, you click open individual photos and iterate through them using left/right arrows, as well as various editing tools. Each of the iterate/tool actions does a history.push() to add the route to the router history. I am trying to implement a button that will go back to the exact place in the history before you started viewing individual photos. To do that, I'd like to walk the history stack backwards to the point where the the history matches 1 of several patterns then do a history.go(-14) (or whatever) to jump back to the route that started the whole chain.

我一直在搜索React路由器代码以及HTML5历史记录对象，但看不到直接访问历史记录堆栈的任何方式，因此我可以对其进行遍历背部。我宁愿不依赖于使每个单独的摄影动作将其路径推到一个单独的位置，因为那样会使它变得脆弱（每个摄影动作是由不同的开发人员构建的，将来添加新的动作将需要以前的知识来记住才能做到这一点）。

I've been searching the React router code as well as the HTML5 History object and I don't see any way of accessing the history stack directly so I can walk it back. I'd rather not depend on making each individual photo action push their path to a separate place since that makes it fragile (each photo action is built by a different developer and adding new actions in the future will require previous knowledge to remember to do that).

我不能走硬编码的路径，因为它将被推到历史记录堆栈的顶部，然后按向后箭头只会使您回到最后一张照片页面，而不是首先生成相册列表的搜索页面。

I can't go to a hard coded path because that would be pushed to the top of the history stack and hitting back arrow would just return you to the last individual photo page instead of the search page that generated the album list in the first place.

关于访问历史记录堆栈的任何建议吗？

Any suggestions on accessing the history stack?

推荐答案

由于这是一个老问题，我不知道这是否与您的情况相关，但是由于我必须自己解决类似的问题，因此我将其放在此处。

I do not know if this would be relevant to your case anymore since this is an old question, but I will put this answer here since I had to solve a similar problem myself.

在我自己的研究中，我找不到 history.stack 对象，但是在那里是一种解决方法，也在此处中列出。基本上，您设置了 goBack 计数器，该计数器作为位置状态传递到下一条路线。然后，您可以返回堆栈中的内容，但计数器会说很多次。

In my own research, I was not able to find a "history.stack" object, but there is a workaround that is also listed here. Basically, you set up a goBack counter that gets passed to the next route as location state. You can then go back the in the stack however many times the counter says to.

let goBack
if (history.location.state) {
    goBack = history.location.state.goBack
} else {
    goBack = -1
}

您可以在React Link s中通过替换来传递位置状态= 带有对象的道具。

You can pass location state in React Links by replacing the to= prop with an object.

<Link to={
    { pathname: "/next/path", state: { goBack: goBack - 1 } }
}> Click Here! </Link>

然后您只需调用 history.go（history.location.state.go返回）每当您需要进入入口路线时。

You then just call history.go(history.location.state.goBack) whenever you need to go to the entry route.

如果您有可能输入其中一条更改的路线而无需点击入口一（例如，用户复制并粘贴指向单个图像的URL），则可以添加默认行为。

If you have the possibility of entering one of the changed routes without hitting the entry one (like a user copies and pastes a URL pointing to a single image), then you can add default behaviour.

if (history.location.state) {
    history.go(history.location.state.goBack)
} else {
    // You can add a default action if a user lands on route from an external link
    history.push('/base/url')
}

如果您需要更复杂的行为，例如让检查点路由在您返回时跳过两者之间的任何路由，则该解决方案也可以使用。只需将 goBack 更改为一个数字列表（代表每次返回跳转之间的间隔），即可在每次返回到检查点时弹出该数字。

This solution could also work if you need more complex behaviours like having 'checkpoint' routes that skip any routes in between as you go back. Just change goBack to be a list of numbers (representing the gaps in between each go-back jump) that you can pop each time you revert back to a checkpoint.

另一种可能使您讨厌的解决方案是只替换路由而不是将其压入堆栈，但这需要编写一个包装 Link 。您可以此处

Another solution that might tickle your fancy is to just replace the route instead of pushing it to the stack, but this requires writing a custom component that wraps Link. You can find how to do that here

这篇关于访问React Router历史堆栈的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！