next.js 下一个js与react-leaflet窗口刷新页面时未定义

s3fp2yjn 于 2023-03-22 发布在 React

关注(0)|答案(3)|浏览(120)

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

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> 

}}
}

next.js

来源：https://stackoverflow.com/questions/68178127/next-js-with-react-leaflet-window-is-not-defined-when-refreshing-page

3条答案

按热度按时间

h43kikqp1#

正如你在评论中被告知的那样，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 />
 </>
 )
}

赞(0）回复(0）举报 2023-03-22

guicsvcw2#

您的Map组件不返回任何内容

赞(0）回复(0）举报 2023-03-22

rkkpypqq3#

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

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

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

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

完成此步骤后，动态导入如下创建的Map组件，

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;

这些变更后，瓣叶图应无任何问题。

赞(0）回复(0）举报 2023-03-22

我来回答

next.js 下一个js与react-leaflet窗口刷新页面时未定义

3条答案

相关问题

热门标签

最新问答