在react-google-maps的InfoBox中使用Link导致页面重载问题

这个问题我之前也碰到过，核心原因是InfoBox的DOM节点不在React Router的上下文范围内。Google Maps的InfoBox会把你的内容渲染到一个独立于React应用根节点的DOM元素里（通常是直接挂载在<body>下），这就导致里面的<Link>组件无法获取到React Router提供的router上下文对象，只能降级成普通的<a>标签，点击自然就触发整页刷新了。

下面给你两种可行的解决方案：

方法一：用withRouter高阶组件包裹你的InfoBox组件 #

withRouter可以把路由相关的props（比如history、location）注入到任意组件里，哪怕它不在路由直接渲染的子树中。

1. 首先导入withRouter：

import { Link, withRouter } from "react-router-dom";

2. 导出组件的时候用withRouter包裹：

class MyInfoBox extends Component {
  // 你的组件逻辑
}

export default withRouter(MyInfoBox);

这样处理后，InfoBox里的<Link>就能正常获取路由上下文，实现单页跳转了。

方法二：手动调用history.push实现跳转 #

如果withRouter的方式没生效，或者你更倾向手动控制路由跳转，可以直接用history.push来替代<Link>：

1. 同样需要确保组件能拿到history对象（还是可以通过withRouter注入）
2. 把<Link>替换成可点击的元素，绑定点击事件：

<div style={{ cursor: 'pointer' }} onClick={() => this.props.history.push(`/location/${loc.id}`)}>
  Go To Location
</div>

这种方式本质上和<Link>的工作原理一致，都是调用路由的push方法，不会触发整页刷新。

另外你提到修改enableEventPropagation没用，这个选项是控制InfoBox的事件是否冒泡到地图组件上，和路由上下文完全无关，所以确实解决不了这个问题。

内容的提问来源于stack exchange，提问作者David Martin