Question

我在https://bitbucket.org/codyc54321/anthony-project-react/overview处有一些React，我想点击地图标记并转到React组件（通过React Router，在本例中为'/ profile-employer'url）。

应用程序在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');

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

1 个答案: