在 Google 地图信息窗口中添加 NavLink (React + React Router v4)

Question

我正在使用带有 React 的 Google Maps，React Router v4（没有任何像 react-google-maps 这样的包）。我需要将 React Router v4 组件（NavLink 或 Link）放在 infowindow 中。我尝试使用 ReactDomServer.renderToString()。

const infoWindowContent = ReactDOMServer.renderToString(
            <NavLink to="project/5">Show</NavLink>
        );

this.infoWindow.setContent(infoWindowContent);

我的解决方案来自：Render react-router <Link> inside google InfoWindow

不幸的是它不起作用：

你不应该在 之外使用 or withRouter()

这很好理解，因为路由器超出范围。

你有什么解决方法的想法吗？

Answer 1

最后我切换到https://github.com/istarkov/google-map-react，这解决了我的问题。

---

另一个想法（肮脏的解决方案）：

将历史记录放在全局窗口变量中：

import createHistory from 'history/createBrowserHistory';

if (!window.AppHistory) {
    window.AppHistory = createHistory();
}

在 infowindow 组件中这样做：

const infoWindowContent = `<a class="infowindow" onclick="AppHistory.push('/project/${id}')">Show</a>`;

this.infoWindow.setContent(infoWindowContent);