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

Question

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

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

this.infoWindow.setContent(infoWindowContent);

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

不幸的是它不起作用：

You should not use or withRouter() outside a < Router >

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

你有什么解决办法吗？

Answer 1

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

---

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

将历史记录放入全局 window 变量中：

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);