react-google-maps: Rendering component in infoBox doesn't render Link href

I’m passing a component into an infoBox:

<InfoBox><Component model={model} /></InfoBox>

Within that component is a Link from react-router :

<Link to={model.url}>url</Link>

but when the infoBox is displayed the a tag renders in the DOM without a href

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Reactions: 2
  • Comments: 18 (10 by maintainers)

Commits related to this issue

Most upvoted comments

@tomchentw I do not see why you closed this issue, please reopen it - it is still outstanding, I was about to post the same! Context should be passed, but it is lost because children are rendered using ReactDom.render. Look into renderSubtreeIntoContainer. It’s a means of passing context to manual React rendering. I was going to try submitting a PR myself, but I’m still trying to digest the react-google-maps code base. I was hoping you or someone else closely involved in the project might be able to provide a quick patch.

I understand the context issue is normally irrelevant, but React Router relies upon it for the <Link> component, and it’s a fairly standard use case, I think, to include route links within a map info window.

Note that @wuct’s tentative solution of setting href directly is not a complete fix. First off, it causes a page reload. Second, in certain cases, the transition will be blocked and default prevented, just before an error gets thrown because this.context.router doesn’t exist (in my particular case, it seems anytime the map route is not the initially loaded route fetched from the server).

Long story short - those are not problems I should need to debug, since react-google-maps should be passing context. 😃

For now, I’m falling back to <a> tags, which force a page reload, but also don’t break.

<Link /> expects a router in the context. Without it, <Link /> do not generate a href attribute.

AFAIK < InfoBox /> or other react-google-maps components does not pass their owners context to their children, because react-google-maps renders in a different context internally.

A quick fix would be setting href directly

 <Link href={mode.url} />

A better solution would be making react-google-maps handling context properly. @tomchentw How do you think?

Has this issue cropped back up again with react router v4? All my Links work without causing a page reload except for the ones inside the InfoBox. For me replicating the issue is as simple as a Link inside an InfoBox, clicking it, and the link is followed like a traditional anchor tag.

Perhaps a Link will never work in the InfoBox due to the event propagation?

I created a stack-overflow about this as well but no responses. https://stackoverflow.com/questions/48234933/link-in-infobox-using-react-google-maps-causes-page-reload