[Sveltekit] goto 함수가 작동하지 않을 때 (루트 페이지 이동 불가)

다음과 같은 logout 함수를 만들어 사용 중이었습니다.

function logout() {
  goto("/");
}

폴더 구조는 위와 같았습니다. /admin에서 로그아웃 버튼을 누르면 / (가장 밖에 있는 +page.svelte)로 이동하도록 코드를 짰습니다. 

function clickLogOut() {
    logout();
  }

하지만 버튼을 아무리 눌러도 예상대로 / 페이지로 이동하지 않았습니다.

function clickLogOut() {
    try {
        logout();
        console.log("Logged out successfully");
    } catch (error) {
      console.error("Logout failed:", error);
    }
  }

다음과 같이 콘솔창에 로그를 띄워보아 확인한 결과 "Logged out sucessfully"라는 메세지는 정상적으로 출력되지만, goto 함수가 제대로 작동하지 않았음을 알 수 있었습니다.

열어놓은 서버에서도 어떠한 에러메시지가 뜨지않았던 상태였고, 검색 결과 다음과 같은 원인을 찾을 수 있었습니다.

https://github.com/sveltejs/kit/issues/9399

issuing a goto('/route') to an internal svelte page that redirects to an external url throws an "Error: Not found: /api/user" er

 

 

1. 내부 라우트에서 외부 URL로 리디렉션:
   • 내부 라우트(+page.ts, +page.server.ts, +server.ts)에서 외부 URL로 리디렉션을 수행하면, SvelteKit은 이를 내부 라우트로 인식하려고 시도할 수 있습니다.
   • SvelteKit은 외부 URL을 처리할 준비가 되어 있지 않기 때문에, 이 경우 "Not found" 오류가 발생할 수 있습니다.
2. 문제의 원인:
   • SvelteKit의 goto 함수는 일반적으로 내부 라우트를 처리하는 데 사용됩니다. 따라서 외부 URL로의 리디렉션을 직접 지원하지 않을 수 있습니다.
   • 리디렉션을 외부 URL로 처리해야 할 경우, goto를 사용하면 SvelteKit이 이를 내부 라우트로 처리하려고 시도하면서 문제가 발생할 수 있습니다.
3. 해결 방법:
   • window.location.href를 사용: 외부 URL로 리디렉션할 때 window.location.href를 사용하면 브라우저가 직접 외부 URL로 리디렉션하므로 SvelteKit의 라우팅 시스템과의 충돌을 피할 수 있습니다.

 

admin이라는 내부 라우트에서 외부 라이트인 "/"로 이동하려고 할 때, goto 함수가 제대로 인식하지 못해서 일어난 오류였습니다. 다음과 같이 logout 함수를 수정하였더니 정상적으로 실행되었습니다.

function logout() {
  window.location.href = '/';
}