访问 React Router 历史堆栈

Question

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

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

我无法进入硬编码路径，因为它会被推到历史堆栈的顶部，而点击后退箭头只会将您返回到最后一个单独的照片页面，而不是首先生成相册列表的搜索页面.

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

Answer 1

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

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

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

您可以通过用对象Link替换to=prop来传递 React 中的位置状态。

<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. 你可以在这里找到如何做到这一点