Question

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

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

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

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

Answer 1

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

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

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

您可以通过将Link道具替换为对象来在React 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

访问React Router历史堆栈

1 个答案: