SvelteKit 현재 url, query string, params 구하기

SvelteKit으로 개발하면서 현재 경로에 따라 스타일링을 해야 하는 경우가 있습니다. 그러려면 현재 경로를 알 수 있어야겠죠. 그럼 sveltekit에서 현재 url 경로 구하는 방법을 확인해 보겠습니다.

오랫동안 SvelteKit이 1.0 출시를 못하고 있었는데, 2022년 12월 14일부로 1.0 출시를 했습니다. 1.0 출시 이전에는 처리하는 방법이 바뀌기도 했었는데, 이제 1.0 출시를 했으니, 어느정도 안정이 됐다고 볼 수 있겠네요.

page 스토어 활용

sveltekit에서는 page라는 스토어에 현재 페이지에 대한 정보가 보관되고 있습니다.
import 하는 방법은 아래와 같습니다.

import {page} from "$app/stores";

현재 url 경로 구하기

$page.url.pathname을 이용하면 “/about”과 같이 현재 url을 얻을 수 있습니다.

현재 url의 query string 구하기

$page.url.search를 이용하면 “?keyword=test”와 같이 현재의 query string을 얻을 수 있습니다.

1.0 출시 이전에 $page.path 였던 적도 있고, $page.url.pathname을 이용하기도 했는데, 1.0 출시 이후로 확인한 기준으로는 $page.url.pathname을 이용하셔야 합니다. 아래의 코드는 현재의 pathname과 query string을 화면에 출력하는 코드입니다.

<script>
import {page} from "$app/stores";
</script>

<div>{$page.url.pathname}</div>
<div>{$page.url.search}</div>

만약 http://localhost:5173/search?keyword=love 라는 경로로 접속했다면, 아래와 같은 내용이 브라우저에 출력됩니다.

/search
?keyword=love

params를 활용하여 slug 구하기

이를테면 /blog/[slug] 의 형태로 블로그를 만들어서 slug를 활용 중이라면, 아래와 같이 $page.url.params를 활용하여 {slug: “slug값”} 객체를 구할 수 있습니다.

<script>
import {page} from "$app/stores";
</script>

<div>{$page.url.params.slug}</div>

만약 https://localhost:5173/blog/hello-world 라는 경로로 접속한다면, 아래와 같은 내용이 브라우저에 출력됩니다.

hello-world

예제) 현재 url에 따라 링크 스타일링 하기

네비게이션 메뉴에서 현재 페이지의 링크를 굵게 표시하고 싶다면 아래와 같이 처리할 수 있습니다.

<script>
  import {page} from '$app/stores';
</script>

<header>
  <nav>
    <a href="/" class="{$page.url.pathname === '/' ? 'selected' : ''}">홈페이지</a>
    <a href="/about" class="{$page.url.pathname === '/about' ? 'selected' : ''}">이 사이트는?</a>
  </nav>
</header>
<slot/>

<style>
.selected {
  font-weight: bold;
}
</style>