SvelteKit 후크에서 리디렉션을 만드는 방법

목차

The Process

Explanation

SvelteKit 후크를 사용하면 많은 작업을 수행할 수 있습니다. hooks을 사용하여 SvelteKit 앱에 대한 리디렉션을 만드는 방법에 대한 약간의 자습서를 작성하겠습니다.

최근에는 SvelteKit 후크를 사용하는 방법에 대해 설명합니다. 오늘은 앱에 대한 리디렉션을 설정하는 방법에 대한 간단한 예를 보여드리겠습니다.

이 블로그 게시물을 작성하는 주된 이유는 내 블로그 피드 URL을 ” https://www.kudadam.com/blog/feed”에서 ” https://www.kudadm.com/blog/feed.xml”로 변경한 방법을 보여주기 위한 것입니다. URL을 변경한 이유는 내 피드 페이지를 더 동적으로 만들기 위해서였습니다. SvelteKit에서 확장자가 지정되지 않은 JavaScript 파일은 사전 렌더링 중에 컴파일되므로 내가 가진 유일한 옵션은 URL을 변경하는 것이었지만 내 RSS 피드가 포함된 사이트가 많기 때문에 여전히 이전 URL이 작동하도록 유지하고 싶었습니다.

과정

따라서 리디렉션 작동 방식을 이미 알고 있다고 가정하겠습니다. 리디렉션할 때마다 일반적으로 URL의 경로를 다른 URL로 변경합니다.

누군가가 A를 방문하면 B로 보내라고 말하는 것과 같습니다. 따라서 예제에서는 "/blog/feed"를 방문하는 사용자를 "/blog/feed.xml"로 리디렉션하는 방법을 보여 드리겠습니다.

먼저 hooks.js 파일을 열고 다음 코드를 붙여넣습니다.

export const handle = async ({ event, resolve })=>{
  if (event.url.pathname === "/blog/feed"){
​ return Response.redirect(`${event.url.origin}/blog/feed.xml`,301)
  }
  return await resolve(event);
}

설명

먼저 handle이라는 비동기 함수를 생성하고 내보냈습니다. 핸들 기능이 서버에 대한 모든 요청에서 실행되기 때문에 이것은 Svelte에 필요합니다. 이 함수는 이벤트 개체와 해결 함수를 받습니다. 이벤트 개체에 액세스하려면 사용자가 요청하는 현재 URL을 얻으므로 간단한 if 문을 사용했습니다. 사용자가 리디렉션하려는 URL을 방문하는 경우 표준 응답을 반환합니다.

이제 if 문이 true인 경우 사용자가 방문하기를 원하는 URL에 Response.redirect을 반환합니다. 이 함수는 URL과 상태라는 두 개의 매개변수를 사용합니다. 상태는 선택적 매개변수입니다.

경로를 추가하기 전에 event.url.origin을 사용한 이유는 사용자가 사이트에 액세스할 때 사용한 것과 동일한 원본을 사용하기 위해서였습니다. 필수는 아니며 전체 링크를 클릭하면 문제 없이 작동합니다.

SvelteKit에서 리디렉션을 만드는 간단한 방법입니다😃

의견 섹션에 질문을 하고 도움이 되었으면 공유하십시오.