javascript - 通过 map 标记导航到react-router URL

Question

我在 https://bitbucket.org/codyc54321/anthony-project-react/overview 有一些 React我想单击 map 标记并转到 React 组件(通过 React Router，在本例中为“/profile-employer”url)。

应用程序在 src/index.js 中启动

map 位于 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');