Так что я рендерим кучу <Marker />
, которые дают google-maps-react
Проблема в том, что не похоже, что google-maps-react
нравится, когда я добавляю <Link />
, который приходит от react-router-dom
Вот как я это собрал:
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>
)
}
Я пытался использовать window.location
вместо этого, но это перезагружает страницу, и я не хочу этого.
Я получаюэта ошибка с приведенным выше кодом, для меня не имеет смысла:
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.
С этим я пытаюсь получить кликабельный <Marker/>
, который будет отображать другой элемент.Доступ к этому конкретному элементу можно получить, открыв Route
, присутствующий в примере кода.
Используемый маршрут:
<Route path='/c/contribution/:id' component={Contribution} />