如何将 react-router-link 添加到使用 forEach 方法创建的 mapbox 标记

Question

我对 mapbox 库不是很熟悉，我有一个问题：如何将路由器 link 添加到每个 mapbox 标记？因为如果我使用 window.location 它会起作用，但每次我单击标记时我的地图组件都会重新呈现。基本上，我想做的是将 window.location 更改为 Router-link.

rtdb.ref('/').once('value').then((snapshot) => {
  if (snapshot.exists()) {
    snapshot.val().features.forEach(function (marker) {
      
      new mapboxgl.Marker().setLngLat(marker.geometry.coordinates).addTo(map).getElement().addEventListener('click', () => {
        //<Link to={'/markerinfo/' + marker.properties.docID}/> 
        //window.location=('/markerinfo/'+marker.properties.docID)
      })
    }
    )
  } else console.log("No data available")
}).catch((error) => {
  console.error(error);
});

Answer 1

我认为您正在寻找“如何以编程方式导航” 尝试使用

import { useHistory } from "react-router-dom";
function YourComponent(){
  const history = useHistory();


}

然后在你的函数中

rtdb.ref('/').once('value').then((snapshot) => {
  if (snapshot.exists()) {
    snapshot.val().features.forEach(function (marker) {
      
      new mapboxgl.Marker().setLngLat(marker.geometry.coordinates).addTo(map).getElement().addEventListener('click', () => {
      
         history.push('/markerinfo/'+marker.properties.docID);
      })
    }
    )
  } else console.log("No data available")
}).catch((error) => {
  console.error(error);
});