Svelte의 라우터기능

말 그대로 각 패스에 도달할때마다 어떤 페이지를 보여줄 것인지를 결정해주는 분기결정자 역할을 한다.

 

App.svelte

<script>
    import Router from "svelte-spa-router";
    import router from "./router";
</script>

<Router routes={ router } />

svelte-spa-router 를 불러와서 Router 엘리먼트를 사용할 수 있다. prefix는 선택사항이며 없을 경우에는 ""로 디폴트가 되는 특성인 듯 하다. 구체적으로는 더 살펴봐야하는데 계속 볼때마다 헷갈린다.

 

중첩 라우터

<script>
    import Router from "svelte-spa-router";
    import router from "./router.js";
</script>

<Router routes={ router } prefix={ "/user" } />

위에서 사용했던 Router 엘리먼트에 prefix 라는 프로퍼티를 하나 더 전달하면 된다. prefix를 추가하면 알아서 prefix + path 형태의 결합으로 라우팅 결과를 보여준다. 그런데 여기에서 뭔가 꼬임이 발생하는것을 확인했다. 꼬임은 아래에서 후술

 

router.js

import Root from "./Root.svelte";
import Main from "./Main.svelte";
import Login from "./Login.svelte";

export default {
    "/": Root, 
    "/main": Main, 
    "/login": Login
};

router 에서 패스를 지정할 때는 반드시 / 아니면 * 으로 시작해야한다는 조건이 있다고 한다.

 

원리 자체는 쉽다. {} 으로 둘러싸인 Object 타입 데이터에서 key는 url 경로를 상징하고 value는 각 경로별로 보여지게 될 svelte 컴포넌트를 지정한다. 그런데 한가지 헷갈리기 쉬운경우가 있다.

 

 

---

 

 

import User from "./User.svelte";

export default {
    "/user": User, 
    "/user/*": User
};

이 방식을 사용하면 user 에서 끝나는 패스로 들어가도, /로 끝나는 패스로 들어가도 동일한 User 컴포넌트를 보여주는 페이지로 이동을 하지만 꼬임이 발생한다.

 

transition 을 사용하도록 조치를 했다면 /user/login 에서 /user 로 넘어가는 순간 2개의 페이지가 보여지는 문제가 발생한다. transition 을 사용하지 않는다면 아무런 애니메이션 없이 화면이 즉시 전환되기 때문에 발생은 해도 눈으로 캐치하기 어렵다.

 

이런 경우라면 /user 가 아닌 /user/ 를 사용해서 회피하는 수 밖에 없다.