访问 React Router 历史堆栈

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

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

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

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

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

在我自己的研究中，我找不到“history.stack“对象，但也列出了一个解决方法here https://github.com/ReactTraining/react-router/issues/1496#issuecomment-119558014。基本上，你设置了一个goBack作为位置状态传递到下一个路由的计数器。然后，无论计数器指示多少次，您都可以返回堆栈。

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

您可以在 React 中传递位置状态Links 通过替换to=支撑一个物体。

<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 https://github.com/ReactTraining/react-router/issues/3776#issuecomment-270821438