2017-05-22 11 views
0

Ich habe einige React unter https://bitbucket.org/codyc54321/anthony-project-react/overview, die ich auf einen Kartenmarker klicken und zu einer React-Komponente gehen möchte (über React Router, in diesem Fall die '/ profile-employer' URL) .Navigieren zu react-Router-URLs über Kartenmarker

Die App startet in src/index.js

Die Karte ist in src/components/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; 

Einige schlagen vor, den react-router-dom verwenden. Ich konnte nicht Programmatically navigate using react router Ideen mit diesem Paket arbeiten, da sie nur Funktionskomponenten nicht klassenbasiert zeigen.

Antwort

0

Nevermind, ich muss müde gewesen sein. Die Antwort für ein regelmäßiges Drücken außerhalb einer Komponente ist nur

import { browserHistory } from 'react-router'; 

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