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

Question

我在 Next js 中使用 react-leaflet，但是当重新加载页面时显示“window 未定义”，即使我正在使用 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 () 必须超出您要访问的组件或屏幕 return，例如。 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 />
 </>
 )
}

Answer 2

您的地图组件没有return任何东西

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

Next js with react-leaflet window is not defined when refreshing page

reactjs

react-leaflet

next.js