Navigate to react-router URLs through map marker

Question

I have some React at https://bitbucket.org/codyc54321/anthony-project-react/overview that I want to click on a map marker and go to a React component (through React Router, in this case the '/profile-employer' url).

The app starts in src/index.js

The map is 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;

Some suggest using the react-router-dom. I couldn't get Programmatically navigate using react router ideas working with this package, as they only show function components not class based.

Answer 1

Nevermind, I must have been tired. The answer for a regular push outside of a component is just

import { browserHistory } from 'react-router';

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