如何为forEach方法创建的Mapbox标记添加react-router-link跳转功能

解决方法 #

你遇到的问题本质是window.location是浏览器原生的全局跳转，会触发整页重载，自然会导致地图组件重新渲染。而<RouterLink>（Vue路由）/<Link>（React路由）是框架路由提供的模板组件，只能在模板/JSX的渲染上下文里使用，不能直接在事件回调中声明调用。你只要改用框架路由提供的编程式导航API就能实现无刷新跳转，避免地图重渲染。

以下是两种主流前端框架的实现示例： #

React（react-router 环境） #

先通过useNavigate钩子获取导航方法，直接在点击回调中调用即可：

// 组件顶部先引入钩子
import { useNavigate } from 'react-router-dom'

function MapComponent() {
  const navigate = useNavigate()
  // 这里假设你已经完成了map实例的初始化，存在mapRef.current中
  const mapRef = useRef(null)

  useEffect(() => {
    if(!mapRef.current) return
    // 你的原有数据加载逻辑
    rtdb.ref('/').once('value').then((snapshot) => {
      if (snapshot.exists()) {
        snapshot.val().features.forEach(marker => {
          new mapboxgl.Marker()
            .setLngLat(marker.geometry.coordinates)
            .addTo(mapRef.current)
            .getElement()
            .addEventListener('click', () => {
              // 替换原有window.location逻辑
              navigate(`/markerinfo/${marker.properties.docID}`)
            })
        })
      } else console.log("No data available")
    }).catch(error => console.error(error))
  }, [navigate])

  // 其余组件渲染逻辑省略
}

Vue 环境 #

Vue3 + vue-router

通过useRouter钩子获取路由实例，调用push方法跳转：

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
// 假设map实例已完成初始化
const initMarkers = () => {
  rtdb.ref('/').once('value').then((snapshot) => {
    if (snapshot.exists()) {
      snapshot.val().features.forEach(marker => {
        new mapboxgl.Marker()
          .setLngLat(marker.geometry.coordinates)
          .addTo(map)
          .getElement()
          .addEventListener('click', () => {
            router.push(`/markerinfo/${marker.properties.docID}`)
          })
      })
    } else console.log("No data available")
  }).catch(error => console.error(error))
}
</script>

Vue2 + vue-router

直接调用实例上的$router.push方法即可，注意用箭头函数保留组件上下文：

// 组件内逻辑
rtdb.ref('/').once('value').then((snapshot) => {
  if (snapshot.exists()) {
    snapshot.val().features.forEach(marker => {
      new mapboxgl.Marker()
        .setLngLat(marker.geometry.coordinates)
        .addTo(map)
        .getElement()
        .addEventListener('click', () => {
          this.$router.push(`/markerinfo/${marker.properties.docID}`)
        })
    })
  } else console.log("No data available")
}).catch(error => console.error(error))

注意事项 #

如果使用其他框架的路由体系，只要找到对应框架的编程式导航API调用即可，核心逻辑都是替代原生全局跳转，使用路由层的无刷新跳转能力，就不会触发地图组件重渲染。

内容的提问来源于stack exchange，提问作者Nikita Golik