1

我无法将 react-router-dom 链接放在 react-google-maps 信息框内，而不会导致整个页面重新加载。

这是我的信息框的代码：

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不会改变行为。

如果有人可以帮助我理解链接导致页面重新加载的原因，我将不胜感激。

先感谢您！

4

1 回答 1

0

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

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

于 2018-11-16T12:06:03.623 回答