Question

我无法在react-google-maps InfoBox中放置react-router-dom链接而不会导致整页重新加载。

这是我的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，但我真的不太了解react路由器v4，以确定上下文是否包含路由器对象。更改enableEventPropagation的值不会改变行为。

如果有人可以帮我理解为什么Link会导致页面重新加载，我会非常感激。

提前谢谢！

Answer 1

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

对我来说，问题是<GoogleMap> onClick事件用于在用户在其外部单击时删除<InfoBox>。但是事实证明，它在<InfoBox>内部也被称为，因此基本上是在处理<InfoBox>点击之前将<Link>内的<Link>删除了。

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

1 个答案: