结合 google-maps-react 和 react-router

Question

So I'm rendering a bunch of <Marker /> that are giving by google-maps-react The problem is that it don't seems like google-maps-react likes it when I add a <Link /> that comes from react-router-dom

This is how I put it together :

render() {
    return (
      <div>
        <Map
          google={this.props.google}
          zoom={14}
          styles={this.props.mapStyles}
          disableDefaultUI={true}
          onClick={this.saveCoords}
        >
          {this.state.data.map(m => {
            return (
              <Link to={`/c/contribution/${m.id}`}>
                <Marker position={{ lat: m.x, lng: m.y }} title={m.title} />
              </Link>
            )
          })}
        </Map>
      </div>
    )
  }

I tried using window.location instead but this reloads the page and I don't want that.

I get this error with the code above, it don't really makes sense for me :

Warning: React does not recognize the `mapCenter` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `mapcenter` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

With this I try to achieve a clickable <Marker/> that will render another element. This specific elemend can be accessed by going to the Route present in the code example.

The route used :

<Route path='/c/contribution/:id' component={Contribution} />

Answer 1

Unfortunately, you cannot wrap markers with google-maps-react like that because of how the map's children are rendered. I didn't look into that too deep, so why exactly it works the way it does is unclear to me.

With google-maps-react I think the way to go is to attach click handlers, but that makes working with react-router a bit more complicated.

For maybe an easier path, you could try the google-map-react package. It works a bit differently, but makes it easy to render almost anything on the map.

Answer 2

You can use the onClick event on the markers for the redirect. Set up a state property for the path you want to redirect to, and if that property is not an empty string , instead of renering your normal component, return a <Redirect/> element.

 constructor(props){
    super(props)
    this.state = {
      ...
      redirectTo:"
    };
}

    this.setRedirect = (path)=>{
      this.setState({
      redirectTo:path
     }
   }

render(){
if(this.state.redirectTo !== "")
    return <Redirect to={this.state.redirectTo}/>
else
 return (
      <div>
        <Map
          google={this.props.google}
          zoom={14}
          styles={this.props.mapStyles}
          disableDefaultUI={true}
          onClick={this.saveCoords}
        >
          {this.state.data.map(m => {
            return (
                <Marker onClick={()=>this.setRedirect(`/c/contribution/${m.id}`)} position={{ lat: m.x, lng: m.y }} title={m.title} />
            )
          })}
        </Map>
      </div>
    )

}