マップマーカーを使用して反応ルータのURLに移動

Question

https://bitbucket.org/codyc54321/anthony-project-react/overviewにマップマーカーをクリックしてリアクションコンポーネント（この場合は '/ profile-employer' URL） 。

アプリがSRCで起動/ index.js

マップのsrc /コンポーネント/ GoogleMap.jsである：

import React, { Component } from 'react'; 
import { Route, Redirect } from 'react-router-dom' 

class GoogleMap extends Component { 

    constructor(props){ 
     super(props); 
     this.renderMap = this.renderMap.bind(this); 
     this.addMarkerToMap = this.addMarkerToMap.bind(this); 
     this.clickMarker = this.clickMarker.bind(this); 
    } 

    componentDidMount() { 
     this.renderMap(); 
    } 

    renderMap() { 
     let map_data = { 
      zoom: this.props.zoom || 10, 
      center: this.props.center || {lat: 30.3, lng: -97.75} // default to Austin 
     }; 

     let this_map = new google.maps.Map(this.refs.map, map_data); 

     let these_points = this.props.coordinates || []; 

     these_points.map(function(coordinates) { 
      this.addMarkerToMap(coordinates, this_map); 
     }.bind(this)); 
    } 

    addMarkerToMap(latLong, the_map) { 
     let marker = new google.maps.Marker({ 
      position: latLong, 
      map: the_map 
     }); 
     marker.addListener('click', this.clickMarker); 
     return marker 
    } 

    clickMarker() { 
     // http://stackoverflow.com/questions/31079081/programmatically-navigate-using-react-router 
     alert('this should route users to the profile of that job/employer, or that worker'); 
     // this.props.history.push('/'); ??? 
     return <Redirect to="/" push /> 
    } 

    render() { 

     return (
      <div> 
       <h3>{this.props.title}</h3> 
       <p>{this.props.description}</p> 
       <div style={ {height: 500, width: 500 } } ref="map" /> 
      </div> 
     ) 
    } 
} 

export default GoogleMap; 

一部はreact-router-domを使用することをお勧め。私はProgrammatically navigate using react routerのアイデアをこのパッケージで扱うことができませんでした。クラスベースではない関数コンポーネントしか表示されないからです。

Answer 1

私は疲れているはずです。コンポーネントの外部での定期的なプッシュの答えは、ちょうど

import { browserHistory } from 'react-router'; 

//wherever you want to, as long as it isnt inside a react component: 
browserHistory.push('/some/path'); 

です