我正在使用带有标记的Mapbox GL JS地图处理React（16）SPA，并且尝试在每个标记弹出窗口中渲染Link，这将引发以下情况：
Error: Invariant failed: You should not use <Link> outside a <Router>
这使我感到困惑，因为Map组件是App组件的子组件，该组件包装在BrowserRouter的{{1}}中。
react-router-dom组件：
Map import React, { Component } from 'react';
import { initalizeMap, getCenter, getZoom, addGeolocateButton, addMarkers, getMarkers } from '../helpers/mapbox';
export default class EventsMap extends Component {
state = { lng: 2.1700556, lat: 41.3869959, zoom: 11 };
onMapMove = () => this.setState({
lng: getCenter('lng', this.map),
lat: getCenter('lat', this.map),
zoom: getZoom(this.map),
});
renderMap = () => {
const { lng, lat, zoom } = this.state;
this.map = initalizeMap(lng, lat, zoom, this.mapContainer);
this.map.on('move', () => this.onMapMove());
addGeolocateButton(this.map);
const markers = getMarkers(this.props.events);
addMarkers(markers, this.map);
}
componentDidMount = () => this.renderMap();
render() {
return (
<div className='events-map'>
<div ref={(el) => this.mapContainer = el} className='mapContainer' />
</div>
);
}
}
助手导入和mapbox.js声明：
addMarkers使用锚定到外部URL没问题，例如：
import React from 'react';
import ReactDOM from 'react-dom';
import { Link } from 'react-router-dom';
import mapboxgl from 'mapbox-gl';
export const addMarkers = (markers, map) => {
markers.features.forEach((marker) => {
const el = document.createElement('div');
el.className = 'marker';
const { _id, name, place } = marker.properties;
const markerDiv = document.createElement('div');
const markerContents = <div><Link to={`/events/${_id}`}><h3>{name}</h3></Link><p>{place}</p></div>;
ReactDOM.render(markerContents, markerDiv);
new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates)
.setPopup(new mapboxgl.Popup({ offset: 25 })
.setDOMContent(markerDiv))
.addTo(map);
})
};
https://google.com const markerContents = <div><a href={
但是我需要对内部链接使用}><h3>{name}</h3></a><p>{place}</p></div>;来避免重定向，重新加载等。Link为什么不选择Link上下文？
答案 0 :(得分：0)
我无法从<Link>获得react-router-dom的支持，而只是用Map HoC封装了父withRouter组件的导出，并通过了{{1 }}插入this.props.history，将事件侦听器附加到弹出内容，并推送到历史记录对象onClick以便重定向：
addMarkers与我之前在上面编写的代码相比，代码有了一些改进，但是，当带有历史记录对象的简单事件侦听器可以执行操作时，关键是无需使用export const addMarkers = (markers, map, history) => {
markers.features.forEach((marker) => {
const onClick = (e) => {
const { _id } = marker.properties;
history.push(`/events/${_id}`);
}
const el = document.createElement('div');
el.className = 'marker';
const { name, place, rank } = marker.properties;
el.style.backgroundImage = `url(/markers/${rank + 1}.svg)`;
const popupContainer = document.createElement('div');
const popupContents = <div><button onClick={onClick}><h3>{name}</h3></button><p>{place}</p></div>;
。