Reactjs 如何在nextjs中使用marker infowindow中的链接组件

嗨，我正在我的nextjs应用程序中实现谷歌地图 这是我的map.js组件文件

import { AsYouType } from 'libphonenumber-js'
import { useState } from 'react';
import {get_location_slug} from '../utility/calculate_distance'

const phoneFormat = new AsYouType('US')
const Marker = (props,location) => `
  <div class="max-w-sm rounded overflow-hidden shadow-lg">
    <div class="px-2">
      <div class="font-bold text-base mb-2 text-blue-500">
        <a href=${"/data/"+location}>
          ${props.city}
        </a>
      </div>
      <p class="text-dark-400 text-sm">${props.street}</p>
      <p class="text-dark-400 text-sm mb-2">
        ${props.city}, ${props.stateIso}, ${props.countryIso}, ${props.postalCode}
      </p>
      <p class="text-gray-700 font-medium mb-2">
        Phone: <span class="font-light">${phoneFormat.input(props.phone)}</span>
      </p>
      <p>
        <a class="text-blue-500" href="https://www.google.com/maps/dir/'+${props.defaultLat}+','+${props.defaultLng}+'/'+${props.latitude}+','+${props.longitude}+'">
        Directions
        </a>
      </p>
    </div>
  </div>
`

export default function Map(props) {
  const [locations, setLocations ] = useState(props.locations)
  const defaultProps = {
    center: {
    lat: (typeof(props.latitude) === "undefined" ? 12.22 : props.latitude),
    lng: (typeof(props.longitude) === "undefined" ? -90.22 : props.longitude),
    },
    zoom: 7
  }
  const latitude = (typeof(props.latitude) === "undefined" ? 12.22 : props.latitude)
  const longitude = (typeof(props.longitude) === "undefined" ?  -90.22: props.longitude)
  function handleApiLoaded(map,lat,lng){
    let infowindow = new google.maps.InfoWindow()
    let markerCenter = 0
    props.locations.map((location) => {
     let location_slug = get_location_slug(location)
      markerCenter == 0 && map.setCenter(new google.maps.LatLng(location.latitude,location.longitude))
      markerCenter = 1
      let marker = new google.maps.Marker({position: {lat: parseFloat(location.latitude), lng: parseFloat(location.longitude)}, map: map, title: location.name})
      marker.setIcon('http://maps.google.com/mapfiles/ms/icons/red-dot.png')
      marker.addListener('click', function() {
        infowindow.close()
        infowindow.setContent(Marker(location,location_slug))
        infowindow.open(map, marker)
      })
    })
  }

  return (
    <div style={{ height: '100%', width: '100%' }}>
      <GoogleMapReact
        bootstrapURLKeys={{ key: `${process.env.GOOGLE_API_KEY}` }}
        defaultCenter={defaultProps.center}
        defaultZoom={defaultProps.zoom}
        yesIWantToUseGoogleMapApiInternals
        onGoogleApiLoaded={({ map }) => handleApiLoaded(map,latitude,longitude)}
        key={props.locations,latitude,longitude}
        />
    </div>
  )
}

从'libphonenumber js'导入{AsYouType}
从“react”导入{useState}；
从“../utility/calculate\u distance”导入{get\u location\u slug}
const phoneFormat=新的AsYouType（'US'）
常量标记=（道具，位置）=>`
${props.street}

${props.city}、${props.stateIso}、${props.countryIso}、${props.postalCode}


电话：${phoneFormat.input（props.Phone）}



`
导出默认功能映射（道具）{
const[locations，setLocations]=useState（道具位置）
const defaultProps={
中心：{
纬度：（种类（道具纬度）==“未定义”？12.22：道具纬度），
液化天然气：（类型（道具经度）==“未定义”？-90.22：道具经度），
},
缩放：7
}
常量纬度=（类型（道具纬度）==“未定义”？12.22：道具纬度）
常量经度=（类型（道具经度）==“未定义”？-90.22：道具经度）
功能手柄（map、lat、lng）{
让infowindow=new google.maps.infowindow（）
让markerCenter=0
道具.位置.地图（（位置）=>{
let location\u slug=获取位置\u slug（位置）
markerCenter==0&&map.setCenter（新的google.maps.LatLng（位置.纬度，位置.经度））
markerCenter=1
让marker=new google.maps.marker（{position:{lat:parseFloat（location.latitude），lng:parseFloat（location.longitude）}，map:map，title:location.name}）
marker.setIcon（'http://maps.google.com/mapfiles/ms/icons/red-dot.png')
marker.addListener（'click'，function（））{
infowindow.close（）
infowindow.setContent（标记器（位置，位置_slug））
信息窗口。打开（地图、标记）
})
})
}
返回(
handleApiLoaded（地图、纬度、经度）}
key={props.位置、纬度、经度}
/>
)
}

正如您所看到的，目前我正在const Marker中使用a标记

<a href=${"/data/"+location}>
          ${props.city}
 </a>

对于正在重新加载页面的地图信息窗口，我想使用链接标记，这样它就不会重新加载页面，在我的整个应用程序中，我使用链接标记，这样它就不会重新加载页面，但对于这个标记信息窗口，我无法这样做。

---

我该怎么做？

为什么您不能这样做？如果您使用

路由器.推送

？它仍在重新加载整个页面文件

“/data/”+位置

是否存在于页面中？是的，它确实存在，你能分享一下整个例子吗？我应该怎样做而不是

你应该从

next/router

导入

useRouter

，并在标记组件的开头调用

const router=useRouter（）

。我不确定这是否有效。如果没有，您应该在codesandbox上创建一个可复制的示例。