通过地图标记导航到 react-router URL

Question

我在https://bitbucket.org/codyc54321/anthony-project-react/overview 有一些 React，我想单击地图标记并转到 React 组件（通过 React 路由器，在本例中为“/profile-employer”网址）。

应用在 src/index.js 中启动

地图在 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;

有些人建议使用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');