Reactjs 如何使弹出窗口与mapbox和Next.js链接？

我正在使用react map gl渲染一张地图，用标记显示不同的位置
单击此标记时，将显示一个弹出窗口，其中包含此位置的所有详细信息
我想当我点击弹出窗口时，它会将我重定向到该位置的页面

标记和弹出窗口的我的代码：

return (
    <ReactMapGL
      {...viewport}
      mapboxApiAccessToken={mapboxKey}
      onViewportChange={(viewport) => {
        setViewport(viewport);
      }}
      mapStyle="mapbox://styles/medhisavarybouge/cki8vpz0l0iee1aoiw7r69bwr"
    >
      {router.pathname === "/pdrs/[slug]" &&
        data.map((location) => {
          const { id, latitude, longitude } = location;
          return (
            <Marker key={id} latitude={latitude} longitude={longitude}>
              {/* si on supprime le bouton l'image de s'affiche pas sur la map*/}
              <button></button>
              <Image src="/images/map-pin.svg" alt="" width={40} height={40} />
            </Marker>
          );
        })}
      {router.pathname === "/points-de-rencontre-sportive" &&
        data.map((pdrs) => {
          const { id, latitude, longitude } = pdrs;
          return (
            <Marker key={id} latitude={latitude} longitude={longitude}>
              <button
                className={style.markerBtn}
                onClick={(event) => {
                  event.preventDefault();
                  setSelectedPDRS(pdrs);
                }}
              >
                <Image
                  src="/images/map-pin.svg"
                  alt=""
                  width={40}
                  height={40}
                />
              </button>
            </Marker>
          );
        })}

      {selectedPDRS && (
        <Popup
          latitude={selectedPDRS.latitude}
          longitude={selectedPDRS.longitude}
          onClose={() => {
            setSelectedPDRS(null);
          }}
          closeButton={true}
          closeOnclick={false}
          captureClick={true}
        >
          <div
            className={style.selectedPDRS}
            onMouseDown={() => {
              router.push(`/pdrs/${selectedPDRS.slug}`);
            }}
          >
            <Image
              src={imageUrl}
              alt={selectedPDRS.micro_activity_name}
              width={100}
              height={100}
            />

            <div className={style.selectedPDRSdetails}>
              <div className={style.selectedPDRStitle}>
                <h4>
                  {selectedPDRS.installation_name}
                </h4>
                <span>
                  {selectedPDRS.name)}
                </span>
                <span>
                  {selectedPDRS.micro_activity_name)}       
                </span>
              </div>
              <div className={style.selectedPDRSdate}>
                {selectedPDRS.start_date &&
                  selectedPDRS.start_date +
                    " - " +
                    selectedPDRS.duration +
                    " - " +
                    selectedPDRS.access_type}
              </div>
              <div className={style.selectedPDRSbadge}>
                {badge[selectedPDRS.category]}
              </div>
            </div>
          </div>
        </Popup>
      )}
    </ReactMapGL>
  );

返回(
{
设置视口（视口）；
}}
地图样式=”mapbox://styles/medhisavarybouge/cki8vpz0l0iee1aoiw7r69bwr"
>
{router.pathname===“/pdrs/[slug]”&&
data.map（（位置）=>{
常数{id，纬度，经度}=位置；
返回(
{/*si关于地图上的附属图像的补充*/}
);
})}
{router.pathname==“/points de rencontrol sportive”&&
data.map（（pdrs）=>{
常数{id，纬度，经度}=pdrs；
返回(
{
event.preventDefault（）；
设置选定的PDR（PDR）；
}}
>
);
})}
{选定的PDR&&(
{
SetSelectedPDR（空）；
}}
closeButton={true}
closeOnclick={false}
captureClick={true}
>
{
router.push（`/pdrs/${selectedPDRS.slug}`）；
}}
>
{selectedPDRS.installation\u name}
{selectedPDRS.name）}
{selectedPDRS.micro_activity_name）}
{selectedPDRS.start\u日期&&
所选PDRS.start\u日期+
" - " +
选定的PDRS.duration+
" - " +
已选择PDRS.access\u type}
{badge[selectedPDRS.category]}
)}
);

我不得不在弹出的div上放一个onMouseDown，这样重定向就可以工作了
用onclick就不行了。弹出窗口刚刚关闭。
问题在于反应灵敏的人
我认为onClick与触摸手机屏幕相同，但onMouseDown在手机上没有任何功能，因此用户无法重定向到页面。

---

如何使用onClick使弹出重定向工作？

您不需要添加onMouseDownonClick对于桌面+触摸设备来说已经足够了

需要注意的一点是，bind onClick to layer不能直接映射

使用React更新了下面的代码（您可以在下一步中相应更新），单击弹出窗口“hi”将在控制台中打印

文件
/*看https://github.com/mapbox/mapbox-react-examples/ 举个例子*/
//您的Mapbox访问令牌从此处开始
mapboxgl.accessToken=''；
类工具提示扩展了React.Component{
handleClick（e）{
控制台日志（“hi”）；
}
render（）{
const{features}=this.props；
常量渲染功能=（功能，i）=>{
返回(
{feature.layer['source-layer']}:
{feature.layer.id}
)
};
返回(
this.handleClick（e）}className=“flex parent inline flex parent--中心交叉flex parent--列绝对底部”>
{features.map（renderFeature）}
);
}
}
类应用程序扩展了React.Component{
工具容器；
设置工具提示（功能）{
if（特征.长度）{
ReactDOM.render(
React.createElement(
工具提示{
特征
}
),
this.tooltipContainer
);
}否则{
ReactDOM.unmountComponentAtNode（this.tooltipContainer）
}
}
componentDidMount（）{
//将生成的内容放入其中的容器。
this.tooltipContainer=document.createElement（'div'）；
常量映射=新的mapboxgl.map({
容器：this.mapContainer，
风格：'mapbox://styles/mapbox/streets-v9',
中间：[-79.38,43.65]，
缩放：12.5，
德拉格罗特：错，
滚动缩放：对，
双击缩放：错误，
touchZoomRotate:false，
渲染世界副本：false
});
map.getCanvas（）.style.cursor='default'；
const tooltip=new mapboxgl.Marker（this.tooltipContainer{
偏移量：[-120，0]
}).setLngLat（[0,0]）.addTo（map）；
地图上（'click'，'place neighbourth'，（e）=>{
const features=map.queryRenderedFeatures（e.point）；
工具提示：setLngLat（e.lngLat）；
/*map.getCanvas（）.style.cursor=features.length？'pointer'：''*/
此.setTooltip（特性）；
});
//当鼠标位于places图层上时，将光标更改为指针。
地图（'mouseenter'，“place Neighbourth”，函数（）{