刷新页面时未定义带有react-leaflet窗口的下一个js

如何解决刷新页面时未定义带有react-leaflet窗口的下一个js

我在 Next js 中使用 react-leaflet，但是当重新加载页面时显示“窗口未定义”，即使我正在使用带有 ssr:false 的动态导入， 我在这里看到了其他人提出的这个问题，并尝试了他们提供但没有用的答案，还尝试在组件之后安装地图，但同样没有结果， 我的代码：

function ContactPage() {
    const MapWithNoSSR = dynamic(() => import('../Map/Map'),{
        ssr: false,})
    return (
        <div className={styles.map}>
            <MapWithNoSSR/>
        </div>
    )
}

---

function Map(){

const [markers,setMarkers]= useState([
        {cord:[12.3774729,20.446257]},{cord:[45.3774729,10.45224757]},{cord:[40.3774729,15.4364757]},])

<MapContainer center={[12.374729,22.4464757]} zoom={13} scrollWheelZoom={true} style={{height: "100%",width: "100%",zIndex:'1'}}>
          <TileLayer
              url={`example.com`}
              attribution='Map data &copy; <a>MapBox</a>'
          />
          {markers?.map((element,idx)=>{
            return <Marker
                position={element?.cord}
                draggable={true}
                animate={true}
                key={idx}
            >
              <Popup>
                Test PopUP
              </Popup>
            </Marker>
          })}
        </MapContainer> 

}}
}

解决方法

正如您在评论中被告知的那样，dynamic () 必须超出您要返回的组件或屏幕，例如。 g.

import dynamic from "next/dynamic"

const MyAwesomeMap = dynamic(() => import("../components/Map/index"),{ ssr:false })

export default function inicio() {

return(
 <>
  <p>Example Map</p>
  <MyAwesomeMap />
 </>
 )
}