使用react-google-maps的信息框中的链接会导致页面重新加载

Question

我无法在不导致整页重新加载的情况下将react-router-dom Link放入react-google-maps InfoBox中。

这是我的信息框的代码：

import InfoBox from 'react-google-maps/lib/components/addons/InfoBox'
import { Link } from "react-router-dom";
class MyInfoBox extends Component {
  ...
  const options = {
    enableEventPropagation:false,
    position: new google.maps.LatLng(loc.latitude, loc.longitude)
  };
  render(){
    return (
      <InfoBox options={options}>
        <Link to={`/location/${loc.id}`}>Go To Location</Link>
      </InfoBox>
    );
  }
}        

我的应用程序中的所有链接都正常工作，除了这个链接。

单击"转到位置"链接时，会导致整页重新加载。我试图通过以下问题进行诊断：https://github.com/tomchentw/react-google-maps/issues/258，但我对反应路由器 v4 的了解真的不够多，无法确定上下文是否包含路由器对象。更改 enableEventPropagation 的值不会更改行为。

如果有人能帮助我理解为什么链接导致页面重新加载，我将不胜感激。

提前谢谢你！

Answer 1

尝试删除组件<GoogleMap> onClick prop 并将enableEventPropagation: true添加到<InfoBox>选项中。

对我来说，问题是当用户单击外部时<GoogleMap> onClick 事件用于删除<InfoBox>。但事实证明它也在<InfoBox>内部调用，所以基本上它是在处理<Link>点击之前用里面的<Link>去除<InfoBox>。