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

[corbpaul]

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

[corbpaul]

Also tested using <Link to='/'>url</Link> in the <InfoBox> component and that does exactly the same

[corbpaul]

@wuct any ideas why this may be?

[wuct]

<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?

[tomchentw]

Since we now have major adoption for react@^0.14, we should be able to fix this.

We're also looking for maintainers. Involve in #266 to help strengthen our community!

[benwiley4000]

@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.

[benwiley4000]

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. :smiley:

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

[brandonmp]

@benwiley4000 did you figure this out?

is it possible to set the route from the parent and pass the handler down to the infoWindow?

I'm able to execute redux actions from the infoWindow by doing that, but I don't know too much about React Router, so uncertain if same applies

[benwiley4000]

@brandonmp: I probably could pass an action down, but I would like to be able to use React Router's Link component rather than specifying an onClick route change explicitly.

[brandonmp]

word, but a bird in hand & all that

the real bummer for me is i can't use MUI components as they require context. haven't found a workaround for that yet.

[tomchentw]

@benwiley4000 @corbpaul @brandonmp

I'm sorry to close this but it would be great if you can help! Yes you are right we should switch to ReactDOM.unstable_renderSubtreeIntoContainer to preserve context.

Do you want to open up a PR for this? Just to let you know, we just released 6.0.0 and it's rewritten from scratch. I hope this could help you understand the code base faster.

It'ss released on npm beta tag. We also have a new demo page. Feel free to try it:
https://tomchentw.github.io/react-google-maps/

[benwiley4000]

@tomchentw thanks for the update. I'm adding this to my todo list and I'll look at it soon. :)

[benwiley4000]

Addressed by https://github.com/tomchentw/react-google-maps/pull/361.

[tomchentw]

Closed by #361 , thanks @benwiley4000 !

[tomchentw]

Released v6.0.1 in the npm beta channel.

[Stupidism]

What about OverlayView and maybe other components?

[benwiley4000]

@stupidisum good catch, didn't notice that when I was working on the pull request because child rendering works a bit differently than InfoWindow/InfoBox. I could submit another change if you'd like?

[iamdavidmartin]

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

[nabeel-akram]

i'm facing same issue. i've a menu inside the InfoBox. And each menu item has a Link. Clicking on a menu item is causing a reload.
Also onClick event is not working inside InfoBox. I've set enableEventPropagation: true, but still can't trigger onClick from children components of InfoBox.