传单弹出窗口在 URL 更改时关闭答案

【问题标题】：Leaflet popup closes upon URL change传单弹出窗口在 URL 更改时关闭
【发布时间】：2021-10-27 16:10:00
【问题描述】：

我有一个带有回调的地图，它在发生平移事件时更新 URL 查询参数（即，当您在 URL 周围移动地图时，将对您的新位置进行编码：...?lat=-96&lng=191）。

我有点击后会打开一个弹出窗口的标记。

问题是，当我单击标记时，地图会平移以允许弹出窗口适合屏幕 (autoPan : true)，这会触发查询参数更新回调，但现在 URL 更改的事实关闭了刚刚-打开弹窗:(

我尝试了autoPan : false 并且还删除了更新查询参数的回调，如果我这样做，问题就会消失。但保持 autoPan 并更新查询参数是一项要求。

我正在使用 React-Leaflet，但我认为它与普通库相比没有什么不同。要更新查询参数，我使用 React-Router 替换方法： history.replace({ search: qs.stringify(newQueries) }) 我相信不会导致重新加载。

为什么弹出窗口消失了，我该如何防止？

【问题讨论】：

【解决方案1】：

解决了，根本原因：location.search，一个包含查询参数的 React-router 属性，每次 URL 更新都会改变。这导致顶级组件SingleMapPage 更新，进而更新所有子组件。

当只有查询参数是新旧道具之间的唯一变化时，解决方案是从 SingleMapPage shouldComponentUpdate 方法返回 false。

组件层次供参考：

ReactRouter ↴
  SingleMapPage ↴
    MapComponent ↴ 
      MarkerComponent ↴
        PopupComponent

【讨论】：