html - 访问 React Router 历史堆栈

Question

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

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

我不能去硬编码的路径，因为它会被推到历史堆栈的顶部，然后点击返回箭头只会让您返回最后一个单独的照片页面，而不是首先生成专辑列表的搜索页面.

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

Answer 1

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

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

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

你可以在 React Link 中传递位置状态s 通过替换 to= Prop 与对象。

<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