时间戳

首页 > 解决方案 > 我如何在反应 js 中保持滚动位置和状态的同时回到历史记录

reactjs - 我如何在反应 js 中保持滚动位置和状态的同时回到历史记录

问题描述

我可以通过什么方式实现这一目标？示例 gif

请帮我。太感谢了

标签： reactjsreact-routerreact-router-domreact-state

解决方案

image-view 组件绘制在搜索结果上，基本上覆盖了整个屏幕。关闭它后，您会再次看到隐藏在其下方的搜索结果。

/myUrl要使其在浏览器上正常工作，您可以在单击图像时在 url 中推送查询参数（假设它是）

 props.history.push({
      pathname: props.match.path,
      search: `?galleryView=${imageId}`
  });

这将更/myUrl改为/myUrl/?galleryView=123.

当点击浏览器返回时，它会返回到以前的 url 即/myUrl. 你需要关闭画廊覆盖。

为此，componentDidUpdate您可以在组件的方法中检查是否props.match.params已更改以及是否galleryView删除了查询参数，然后关闭图库覆盖。

if(prevProps.match.params.galleryView && !this.props.match.params.galleryView) {
 this.closeGalleryOverlay();
}

当用户直接访问此 url 时，您还需要处理这种情况/myUrl/?galleryView=123，基本上您必须打开画廊覆盖。

推荐阅读