刷新页面时未定义带有 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 ()

必须离开您要返回的组件或屏幕，例如。 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

你的地图组件没有返回任何东西

Answer 3

首先，我们需要检查使用react-leaflet创建的Map组件是否被挂载，

  const LeafletMap = () => {
  const [isMounted, setIsMounted] = React.useState(false);

  React.useEffect(() => {
    setIsMounted(true);
  }, []);

  return (
    isMounted && (
      <MapContainer>...</MapContainer>)}

这一步之后，动态导入如下创建的地图组件，

const Container = () => {
  const Map = React.useMemo(
    () => dynamic(() => import("./LeafletMap"), { ssr: false }),
    []
  );
  return (
    <ContainerDiv>
      <HeaderBar />
      <Map />
    </ContainerDiv>
  );
};

最后，确保传单 css 导入到 _app.js 文件中，如下所示，

import "leaflet/dist/leaflet.css";

const App = ({ Component, pageProps }) => {
  return <Component {...pageProps} />;
};

export default App;

在这些更改之后，传单地图应该可以毫无问题地呈现。

Answer 4

将您的 Map 组件从 Pages 目录中移出并直接放入单独的 Components 中。

Nextjs 喜欢预编译 pages 目录以在构建时收集元数据。 https://nextjs.org/docs/basic-features/pages