访问 React Router 历史堆栈

Posted 2023-02-21

【中文标题】访问 React Router 历史堆栈

【英文标题】：Access React Router history stack

【发布时间】：2018-11-07 13:40:04

【问题描述】：

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

我一直在搜索 React 路由器代码以及 html5 History 对象，但我没有看到任何直接访问历史堆栈的方法，因此我可以将其返回。我宁愿不依赖于让每个单独的照片动作将它们的路径推到一个单独的地方，因为这会使它变得脆弱（每个照片动作都是由不同的开发人员构建的，并且将来添加新动作需要以前的知识来记住这样做）。

我无法转到硬编码路径，因为它会被推到历史堆栈的顶部，并且点击返回箭头只会将您返回到最后一个单独的照片页面，而不是生成专辑列表的搜索页面第一名。

关于访问历史堆栈有什么建议吗？

【问题讨论】：

有点晚了，但似乎你可以只使用replace 来代替push 进行内部导航，这样它就不会在历史记录中生成新条目并且“goBack”将呈现最后一条“推送”路线。

【参考方案1】：

我不知道这是否与您的案例相关，因为这是一个老问题，但我将把这个答案放在这里，因为我必须自己解决类似的问题。

在我自己的研究中，我找不到“history.stack”对象，但有一个解决方法也列出了here。基本上，您设置了一个goBack 计数器，该计数器作为位置状态传递到下一条路线。然后，您可以返回堆栈中的任意次数。

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

您可以通过将 to= 属性替换为对象来在 React Links 中传递位置状态。

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

然后，您只需在需要前往入口路线时拨打history.go(history.location.state.goBack)。

如果您有可能在不点击条目的情况下输入已更改的路由之一（例如用户复制并粘贴指向单个图像的 URL），那么您可以添加默认行为。

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 更改为一个数字列表（表示每次返回跳转之间的间隙），您可以在每次返回检查点时弹出这些数字列表。

另一个可能会让你觉得很有趣的解决方案是只替换路由而不是将其推送到堆栈，但这需要编写一个包装 Link 的自定义组件。你可以找到如何做到这一点here