在 Mapbox GL JS 弹出窗口中使用链接会引发错误:固定失败:不应在<路由器>外部使用 <Li

Question

我正在开发一个带有标记的 Mapbox GL JS 地图的 React (16( SPA，我正在尝试在每个标记弹出窗口中渲染一个Link，它会抛出以下内容：Error: Invariant failed: You should not use <Link> outside a <Router>

这让我感到困惑，因为Map组件是App组件的子组件，该组件被包装在react-router-dom的BrowserRouter中。

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声明：

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);
})
};

使用外部 URL 的锚点没有问题，例如：const markerContents = <div><a href={https://google.com}><h3>{name}</h3></a><p>{place}</p></div>;

但是我需要对内部链接使用Link以避免重定向、重新加载等。为什么Link不了解Router背景？

Answer 1

我无法从react-router-dom获得<Link>工作，而是简单地用withRouterHoC包装父Map组件的导出，this.props.history传递到addMarkers，将事件侦听器附加到弹出内容并推送到历史对象onClick以重定向：

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>;

与我上面写的代码相比，代码有点进化，但重点是当带有 history 对象的简单事件侦听器可以使用Link时。