InfoBoxes with ReactRouter's Link do not get Router context

[johanlef]

Meteor app with React:

<Router>
  <Switch>
    <Route exact path={"/"} render={() => <Home {...props} />} />
  </Switch>
</Router>

Home.js

const Marker = ({_id, name}) => (<Link to={`/city/${_id}`}>{name}</Link>);

const Home = ({cities}) => {
  const infoBoxes = cities.map(({_id, name}) => ({
    location: city.address.location,
    option: {
      htmlContent: <Marker key={_id} name={name} _id={_id} />,
    }
  }));
  return(<ReactBingmaps infoboxes={infoBoxes} />);
}

HomeContainer = withTracker(props => ({ cities: Cities.find().fetch() })(Home)

This code runs fine if you replace <Link /> with <a />, but I would like to use <Link /> to prevent reloading the page.

Problem

When I use inside an Infobox Marker, I get this error in the console:

Warning: Failed context type:
The context `router` is marked as required in `Component`,
but its value is `undefined`.
    in Link
    in Marker

and from the BingMaps component:

Error loading Microsoft bingmaps Error: You should not use <Link> outside a <Router>

Failed fixes

I tried to solve this by wrapping <Marker /> in react-router's withRouter, but it did not solve the problem, I obviously got this error:

Error loading Microsoft bingmaps Error:
You should not use <Route> or withRouter() outside a <Router>

Question

Is it possible to render the infoboxes differently?

Inspiration: I previously used the npm package google-map-react where it is possible to place React components as children inside the <Map /> component to render them as markers/infoboxes on the map. Maybe the Bing API limits your options?