next.JS에서 route.push가 작동하지 않습니다.

[crazywook]

환경 version: next@13.2.4 "react-naver-maps": "^0.1.3"

expected: route.push 로 정상적인 페이지 이동

actual route.push 시 다음 에러 발생 react-dom.development.js:22834 Uncaught TypeError: Cannot read properties of null (reading 'isArray') Link를 사용해도 같은 에러 발생

의견 naverMap 에서 history에 접근 하는 부분이 있는지 궁금합니다. 그러면 페이지 이동 전에 초기화 시키는 방법이 필요할 것 같습니다.

참조:

// NaverMap/index.tsx
import React from "react";
import { NaverMap, Marker, useNavermaps } from "react-naver-maps";

const NaverMapComponent = ({
  lat,
  long,
}: {
  lat: number;
  long: number;
}) => {
  const navermaps = useNavermaps();
  const location = new navermaps.LatLng(lat, long);

  return (
      <NaverMap
        defaultCenter={location}
        defaultZoom={15}
      >
        <Marker
          defaultPosition={location}
        />
      </NaverMap>
  );
};

export { NaverMapComponent };

// 컴포넌트 호출부분
<NavermapsProvider ncpClientId={Config.NCP_CLIENT_ID}>
  <NaverMapComponent lat={Number(latitude)} long={Number(longitude)} />
</NavermapsProvider>

[wow056]

개발 중에 Open API 정보가 유효하지 않을때 해당 이슈가 재현되는 것 같습니다. 페이지 렌더링 자체에 문제가 생기면 안되므로 수정이 필요해 보입니다.

[zeakd]

안녕하세요. 가이드 문서에 작성된 대로 dom rendering 역할을 하는 Container (MapDiv) 컴포넌트를 사용해주세요.

import { Container as MapDiv, NaverMap, Marker } from 'react-naver-maps'

<NavermapsProvider ncpClientId={Config.NCP_CLIENT_ID}>
  <MapDiv style={{ ... }} >
    <NaverMapComponent ... />
  </MapDiv>
</NavermapsProvider>

부가적으로 설명드리면,

• react-naver-maps 는 history 객체와 무관합니다.
• open api 인증에 실패하더라도 page렌더링에는 영향을 주지 않습니다. (네이버 지도 대신 인증 실패 이미지가 보이게 됨)
• react 에서는 발생하는 에러를 ErrorBoundary를 통해 상위로 전파되지 않도록 다룰 수 있습니다.

계속 재현되어서 개발이 어려우시다면 재현 가능한 예시 repository 를 만들어 주시면 함께 살펴보겠습니다. 감사합니다