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)
@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 passingcontextto 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
contextissue 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
hrefdirectly 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 becausethis.context.routerdoesn’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 arouterin thecontext. Without it,<Link />do not generate ahrefattribute.AFAIK
< InfoBox />or otherreact-google-mapscomponents does not pass their ownerscontextto their children, becausereact-google-mapsrenders in a different context internally.A quick fix would be setting
hrefdirectlyA better solution would be making
react-google-mapshandlingcontextproperly. @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