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

Question

我在 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> 

}}
}

Answer 1

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

import dynamic from "next/dynamic"

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

export default function inicio() {

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